Neu in Chrome 91

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite von zu Hause aus und drehe von zu Hause aus. Jetzt sehen wir uns an, was es für Entwickler bei Chrome 91 Neues 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 mit Dateien auf dem lokalen Gerät des Nutzers auf die gleiche Weise wie andere installierte Anwendungen interagieren, was die Nutzung natürlicher macht.

Ab Chrome 91 können Sie den Namen und den Speicherort einer Datei oder eines Verzeichnisses vorschlagen, mit dem Sie interagieren möchten. Übergeben Sie dazu ein suggestedName-Attribut 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 standardmäßige Startverzeichnis. Ein Texteditor möchte beispielsweise das Dialogfeld zum Speichern der Datei oder zum Öffnen der Datei im Ordner documents starten. Ein Bildeditor hingegen möchte wahrscheinlich mit dem Ordner pictures beginnen. Sie können ein Standardstartverzeichnis vorschlagen, indem Sie das Attribut startIn übergeben.

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

Weitere Informationen findet ihr in Toms Post File System Access (Dateisystemzugriff).

Dateien aus der Zwischenablage lesen

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

Natürlich erhalten Sie keinen uneingeschränkten Zugriff auf die Zwischenablage, daher müssen Sie einen paste-Event-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 verknüpften Websites teilen

Wenn Ihre Website mehrere Domains hat, die dasselbe Back-End für die Kontoverwaltung verwenden, können Sie Ihre Websites jetzt miteinander verknüpfen. Nutzer können dann ihre Anmeldedaten einmal speichern und sie vom Chrome-Passwortmanager allen Ihren verknüpften Websites vorschlagen lassen.

Das ist ideal, wenn Ihre Website über verschiedene Top-Level-Domains wie google.com und google.ca bereitgestellt wird. Oder vielleicht haben Sie 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 wird. Im folgenden Beispiel 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 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 ab dem ersten Tag verfügbar. Aktuelle Informationen dazu finden Sie unter Anmeldedaten in Chrome mit verknüpften Websites teilen.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Alle Videos von der I/O 2021 sind jetzt online. Dort findest du tolle Inhalte, schau sie dir also an.

Web Transport (früher Quic Transport) hat einige Änderungen durchlaufen und startet einen neuen Ursprungstest.

Der Ursprungstest von Web Assembly SIMD ist abgeschlossen und ist für alle Nutzer verfügbar.

Die überarbeiteten Formularelemente sind nun auch in Android eingetroffen und machen jetzt noch mehr Spaß.

Außerdem wird das Attribut media des <link>-Elements für link rel="icon" berücksichtigt. Das bedeutet, dass Sie verschiedene Symbole basierend auf Medienabfragen definieren können. Zum Beispiel verschiedene Symbole für den dunklen und den hellen 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 Punkte. Unter den folgenden Links finden Sie weitere Informationen zu weiteren Änderungen in Chrome 91.

Abo

Abonnieren Sie den YouTube-Kanal für Chrome-Entwickler, um auf dem Laufenden zu bleiben. Dann werden Sie per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 92 veröffentlicht wird, melde ich Ihnen, was es Neues bei Chrome gibt.