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 Neues für Entwickler in Chrome 91 gibt.

Vorgeschlagene Namen für die File System Access API

Eine meiner Lieblings-APIs aus dem Fugu-Projekt in diesem Jahr sind die File System Access APIs. Nachdem der Nutzer die Berechtigung erteilt hat, können Apps auf die Dateien auf dem lokalen Gerät des Nutzers zugreifen, so wie andere installierte Apps. So können Sie eine natürlichere Nutzererfahrung schaffen.

Ab Chrome 91 können Sie den Namen und den Speicherort einer Datei oder eines Verzeichnisses angeben, mit dem Sie interagieren möchten. 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 Standard-Startverzeichnis. Ein Texteditor möchte den Dialog zum Speichern oder Öffnen von Dateien wahrscheinlich im Ordner documents starten. Ein Bildbearbeiter möchte wahrscheinlich im Ordner pictures beginnen. Sie können ein Standard-Startverzeichnis vorschlagen, indem Sie eine startIn-Property übergeben.

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

Weitere Informationen finden Sie im Beitrag von Tom zum Dateisystemzugriff.

Dateien aus der Zwischenablage lesen

Es gibt eine weitere coole neue API für die Interaktion mit Dateien, die in Chrome 91 eingeführt wird. Auf dem Desktop können Web-Apps jetzt Dateien aus der Zwischenablage lesen. (Das Lesen von Dateien aus der Zwischenablage ist in Safari seit 2018 möglich.)

Sie erhalten natürlich keinen uneingeschränkten Zugriff auf die Zwischenablage. Daher müssen Sie einen paste-Ereignis-Listener einrichten. Im Ereignishandler können Sie dann 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 hat und diese dasselbe Backend für die Kontoverwaltung verwenden, können Sie Ihre Websites jetzt miteinander verknüpfen. Nutzer können dann Anmeldedaten einmal speichern und der Chrome-Passwortmanager schlägt sie für alle Ihre verknüpften Websites vor.

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

Um Ihre Websites zu verknüpfen, müssen Sie eine assetlinks.json-Datei erstellen, in der die Beziehung zwischen den Domains definiert wird. Im Beispiel unten teile ich dem Browser mit, dass die Domains .com und .co.uk miteinander verknüpft sind und die Anmeldedaten gemeinsam nutzen 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 assetlinks.json-Datei für jede Domain im Ordner .well-known.

Diese Funktion wird ab Chrome 91 nach und nach eingeführt und ist möglicherweise nicht sofort verfügbar. Die aktuellen Informationen finden Sie unter Chrome erlauben, Anmeldedaten für verknüpfte Websites freizugeben.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Alle Videos von der I/O 2021 sind jetzt online. Es gibt dort einige tolle Inhalte, also schau sie dir an!

Web Transport (früher Quic Transport) wurde mehrfach geändert und es wird ein neuer Ursprungstest gestartet.

Der Origin-Test für WebAssembly SIMD ist abgeschlossen und die Funktion ist für alle Nutzer verfügbar.

Die überarbeiteten Formularelemente sind jetzt auch für Android verfügbar und verbessern die Nutzerfreundlichkeit.

Das Attribut media des Elements <link> wird für link rel="icon" berücksichtigt. Sie können also verschiedene Symbole basierend auf Media-Anfragen definieren. Beispiel: unterschiedliche Symbole für den hellen und den dunklen Modus.

<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 Neuerungen. Weitere Änderungen in Chrome 91 finden Sie unter den folgenden Links.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 92 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.