Neu in Chrome 89

Pete LePage

Chrome 89 wird jetzt in der stabilen Version eingeführt.

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 89 gibt.

WebHID, WebNFC und Web Serial

Ich bin wirklich begeistert von WebHID, WebNFC und Web Serial. Sie eröffnen Nutzern neue Szenarien, die bisher nicht möglich waren, da sie mit Hardware in der realen Welt interagieren.

Sie ermöglichen es Entwicklern, eine Verbindung zu lustiger, ungewöhnlicher Hardware und Videokonferenz-Apps herzustellen, um die speziellen Telefonietasten auf speziellen Lautsprechern zu verwenden. Oder für eine beliebige Anzahl anderer Anwendungsfälle.

Mit Web Serial und etwa 60 Zeilen Code hat @AndreBan eine Seite erstellt, die mit der MicroPython-REPL auf einem Raspberry Pi Pico interagieren kann. Web Serial wird auch von Espruino in der webbasierten IDE verwendet.

Auf der CDS 2019 hat Francois mit Web NFC ein lustiges Memory-Spiel entwickelt. Sie mussten das Smartphone an die richtige Karte und in der richtigen Reihenfolge halten.

Stream Deck mit Daft Punk-Drum-Pad

Und mein Favorit: @bramus hat WebHID verwendet, um eine Verbindung zu einem StreamDeck herzustellen und ein Daft Punk-Drum-Pad zu erstellen. Wenn du kein Stream Deck hast, kannst du dir dieses Demovideo auf YouTube ansehen und den Code auf GitHub aufrufen.

Ganz gleich, ob Ihre Website mit Ihrer Hardware interagiert oder Ihre Hardware mit vielen Websites interagieren kann – Nutzer profitieren davon, weil sie keine speziellen Treiber oder Software installieren müssen.

Weitere Informationen zu einigen der Geräte, die Sie verbinden können, finden Sie unter web.dev/devices. Außerdem können Sie sich die Anleitungen für die ersten Schritte mit WebHID, WebNFC und Web Serial ansehen.

Änderungen der Kriterien für die Installierbarkeit von PWAs

Die Offlineunterstützung ist seit Beginn ein wichtiger Bestandteil der Kriterien für die Installierbarkeit von progressiven Web-Apps. Wie bei anderen installierten Apps erwarten Nutzer, dass sie zuverlässig funktioniert. Es sollte schnell gehen und der Offline-Dino sollte nie angezeigt werden.

Im Laufe des Jahres möchten wir eine Lücke schließen, die es einigen Websites ermöglichte, die Kriterien für die Installierbarkeit ohne Offline-Erfahrung zu erfüllen. Wenn Ihre PWA bereits eine Offline-Funktion hat, sind Sie startklar. Es ist keine Aktion erforderlich, aber wenn Sie noch keine haben, ist es an der Zeit, eine hinzuzufügen.

Ab Chrome 89 wird in den Entwicklertools auf dem Tab „Probleme“ eine Warnung angezeigt, wenn Ihre PWA im Offlinemodus keine gültige Antwort liefert. Außerdem wird in Lighthouse ein Problem gemeldet. Die Durchsetzung beginnt in Chrome 93, also im Laufe dieses Jahres.

In den Entwicklertools wird eine Warnmeldung in der Konsole angezeigt.
Warnmeldung in der Chrome-Entwicklertools-Konsole.
In den Entwicklertools wird im Tab „Anwendung“ eine Warnmeldung angezeigt.
Warnmeldung auf dem Tab „Anwendung“ > „Manifest“ > „Installierbarkeit“.

Sie können entscheiden, welche Art von Offline-Erlebnis Sie anbieten möchten. Idealerweise stellen Sie so viel wie möglich von Ihrem Erlebnis zur Verfügung. Mindestens kann es aber auch nur eine Offline-Fallbackseite sein.

Weitere Informationen zu dieser Änderung und den Gründen dafür finden Sie unter Verbesserung der Erkennung der Offlineunterstützung von progressiven Web-Apps.

Wenn Sie nicht wissen, wo Sie anfangen sollen, sehen Sie sich Workbox an. Es enthält eine Reihe von Bibliotheken, die einen produktionsbereiten Service Worker für Ihre PWA ermöglichen. Für eine einfache Offline-Fallbackseite finden Sie im Artikel Offline-Fallbackseite erstellen den gesamten benötigten Code, den Sie direkt auf Ihre Website kopieren und einfügen können.

Web Share und Web Share Target für Desktop

Wenn Nutzer auf Ihrer Website Dateien erstellen, bearbeiten oder mit ihnen interagieren können, sollten Sie die Web Share API und die Web Share Target API verwenden. Diese APIs sind schon seit einiger Zeit auf Mobilgeräten verfügbar, werden jetzt aber auch unter ChromeOS und Windows unterstützt.

Mit Web Share können Nutzer Dateien oder Daten an andere auf ihrem Gerät installierte Apps senden, z. B. ein Foto aus Google Fotos an Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Wenn Sie sich als Ziel registrieren möchten, damit andere Apps Dateien oder Daten mit Ihnen teilen können, sollten Sie die Web Share Target API verwenden.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Mit der Web Share API in die Benutzeroberfläche für das Teilen des Betriebssystems einbinden und Mit der Web Share Target API freigegebene Daten empfangen

Und vieles mehr

Und natürlich gibt es noch viel mehr.

In Chrome sind jetzt await auf oberster Ebene in JavaScript-Modulen zulässig.

Neues Omnibox-Installationssymbol für PWAs

Um Verwirrung bei Nutzern zu vermeiden, haben wir das Symbol aktualisiert, das in der Omnibox für installierbare PWAs angezeigt wird.


Wenn Sie eine Trusted Web Activity verwendet haben, um Ihre PWA im Play Store für ChromeOS verfügbar zu machen, können Sie sich für den Digital Goods API-Ursprungstest registrieren.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 89 finden Sie unter den folgenden Links.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

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

Gutschriften

Die Fotos von Raspberry Pi und Arduino stammen von Harrison Broadbent bei Unsplash.