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 auf die gleiche Weise wie andere installierte Apps mit Dateien auf dem lokalen Gerät des Nutzers interagieren. So können Sie eine natürlichere Nutzererfahrung schaffen.

Ab Chrome 91 können Sie den Namen und Speicherort einer Datei oder eines Verzeichnisses vorschlagen, 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 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 gestartet werden. 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. 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 Partnerwebsites teilen

Wenn Ihre Website mehrere Domains hat, die dasselbe Backend für die Kontoverwaltung verwenden, können Sie Ihre Websites jetzt miteinander verknüpfen. So können Nutzer Anmeldedaten einmal speichern und der Chrome-Passwortmanager schlägt sie dann für alle Ihre 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 assetlinks.json-Datei für jede Domain im Ordner .well-known.

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 enthalten tolle Inhalte, die Sie sich unbedingt ansehen sollten.

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

Der Ursprungstest 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 Sie verschiedene Symbole basierend auf Medienabfragen definieren können. 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 Informationen zu Änderungen in Chrome 91.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, 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.