Neu in Chrome 91

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was es in Chrome 91 für Entwickler Neues gibt.

Vorgeschlagene Namen für die File System Access API

Eine meiner Lieblings-APIs aus dem Fugu-Projekt in diesem Jahr sind die APIs für den Dateisystemzugriff. Sobald der Nutzer die Berechtigung erteilt hat, können Apps mit Dateien auf dem lokalen Gerät des Nutzers interagieren, genauso wie es andere installierte Apps tun. Dadurch schaffen Sie eine natürlichere Nutzererfahrung.

Ab Chrome 91 kannst du jetzt den Namen und den Speicherort einer Datei oder eines Verzeichnisses vorschlagen, mit dem bzw. dem du interagieren möchtest. Dazu übergeben Sie eine suggestedName-Eigenschaft als Teil der showSaveFilePicker-Optionen.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Dasselbe gilt für das Standardstartverzeichnis. Bei einem Texteditor sollte das Dialogfeld zum Speichern oder Öffnen von Dateien beispielsweise im Ordner documents gestartet werden. Ein Bildeditor sollte dagegen im Ordner pictures starten. Sie können ein Standardstartverzeichnis vorschlagen, indem Sie eine startIn-Property übergeben.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Ausführliche Informationen finden Sie in Toms Artikel Dateisystemzugriff.

Dateien aus der Zwischenablage lesen

In Chrome 91 gibt es noch eine weitere coole neue API für die Interaktion mit Dateien. Auf dem Computer können Webanwendungen jetzt Dateien aus der Zwischenablage lesen. Das Lesen von Dateien aus der Zwischenablage ist in Safari seit 2018 möglich.

Natürlich haben Sie keinen uneingeschränkten Zugriff auf die Zwischenablage. Sie müssen also einen paste-Ereignis-Listener einrichten. Anschließend können Sie im Event-Handler auf den Inhalt jeder Datei in der Zwischenablage zugreifen.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Anmeldedaten auf verbundenen Websites teilen

Wenn Ihre Website mehrere Domains mit demselben Back-End für die Kontoverwaltung hat, können Sie Ihre Websites jetzt miteinander verknüpfen. So können Nutzer Anmeldedaten einmalig speichern und der Passwortmanager von Chrome schlägt diese für eine Ihrer verknüpften Websites vor.

Das ist ideal, wenn Ihre Website über verschiedene Top-Level-Domains bereitgestellt wird, z. B. google.com und google.ca. Oder Sie haben mehrere Domainnamen.

Wenn Sie Ihre Websites verknüpfen möchten, müssen Sie eine assetlinks.json-Datei erstellen, in der die Beziehung zwischen den Domains definiert ist. Im folgenden Beispiel sage ich dem Browser, dass sowohl die Domain .com als auch die Domain .co.uk miteinander verwandt sind und die Anmeldedaten gemeinsam verwendet werden können.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Hosten Sie dann die Datei assetlinks.json im Ordner .well-known für jede Domain.

Diese Funktion wird in Chrome 91 nach und nach eingeführt und ist möglicherweise nicht von Anfang an verfügbar. Aktuelle Informationen finden Sie unter Chrome so konfigurieren, dass Anmeldedaten für zugehörige Websites freigegeben werden.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Alle Videos von der I/O 2021 sind jetzt online. Sie finden dort tolle Inhalte.

Web Transport (früher Quic Transport) wurde überarbeitet und es wird ein neuer Ursprungstest gestartet.

Die ursprüngliche Testphase für Web Assembly SIMD ist abgeschlossen und die Funktion ist jetzt für alle Nutzer verfügbar.

Die überarbeiteten Formularelemente sind jetzt auch auf Android-Geräten verfügbar und verbessern die Nutzerfreundlichkeit.

Das Attribut media des Elements <link> wird für link rel="icon" berücksichtigt. Das bedeutet, dass du verschiedene Symbole basierend auf Medienabfragen definieren kannst. Beispielsweise können Sie unterschiedliche Symbole für den dunklen und den hellen Modus verwenden.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 91.

Abonnieren

Wenn du auf dem Laufenden bleiben möchtest, abonniere den YouTube-Kanal für Chrome-Entwickler. Du wirst dann per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 92 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.