Neu in Chrome 89

Pete LePage

Die stabile Version von Chrome 89 wird nach und nach eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite von zu Hause aus und fotografiere von zu Hause aus. Als Nächstes sehen wir uns an, was es für Entwickler bei Chrome 89 Neues gibt.

WebHID, WebNFC und Web Serial

Ich freue mich sehr auf WebHID, WebNFC und Web Serial. Sie eröffnen Nutzern, die mit realer Hardware interagieren, völlig neue Szenarien.

Sie ermöglichen Herstellern, eine Verbindung zu unterhaltsamen, ausgefallenen Hardware- und Videokonferenzanwendungen herzustellen, um die speziellen Telefonieschaltflächen auf speziellen Lautsprechern zu verwenden. Oder für eine beliebige Anzahl anderer Anwendungsfälle.

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

Beim CDS 2019 schrieb Francois ein unterhaltsames Spiel im Gedächtnisstil mit Web-NFC. Sie mussten mit dem Smartphone die richtige Karte in der richtigen Reihenfolge antippen.

StreamDeck mit Daft Punk Drum Pad

Und mein Favorit, @bramus, hat sich über WebHID mit einem StreamDeck verbunden und ein Daft Punk-Drumpad gebaut. Wenn du kein StreamDeck hast, schau dir sein Demovideo auf YouTube und den Code auf GitHub an.

Ganz gleich, ob es sich um Ihre Website handelt, die mit Ihrer Hardware interagiert, oder Ihre Hardware, die mit vielen Websites interagieren kann: Nutzer gewinnen, weil sie keine speziellen Treiber oder Software installieren müssen.

Weitere Informationen zu einigen Geräten, mit denen Sie eine Verbindung herstellen können, finden Sie unter web.dev/devices oder in den Leitfäden für die ersten Schritte für WebHID, WebNFC und Web Serial.

Änderungen der Kriterien für die Installierbarkeit von PWAs

Die Offline-Unterstützung war von Anfang an ein wichtiger Bestandteil der progressiven Web-App-Kriterien für die Installierbarkeit. Wie bei anderen installierten Apps erwarten Nutzer, dass sie zuverlässig funktioniert. Sie sollte schnell sein und nie den Offline-Dino sehen!

Im Laufe des Jahres werden wir eine Schwachstelle schließen, die es einigen Websites ermöglichte, die Kriterien für die Installierbarkeit zu erfüllen, ohne dass eine Offlinenutzung möglich war. Wenn deine PWA bereits offline verfügbar ist, musst du nichts weiter tun. Sie müssen nichts weiter tun. Falls nicht, ist es an der Zeit, eine hinzuzufügen.

Wenn Ihre PWA im Offlinemodus keine gültige Antwort zurückgibt, wird ab Chrome 89 in den Entwicklertools auf dem Tab „Probleme“ eine Warnung angezeigt und Lighthouse zeigt an, dass ein Problem vorliegt. Die Durchsetzung wird in Chrome 93 im Laufe des Jahres beginnen.

Entwicklertools mit Warnmeldung in der Console.
Warnmeldung in der Chrome-Entwicklertools-Konsole.
Entwicklertools mit einer Warnmeldung auf dem Tab „Anwendung“.
Warnmeldung auf dem Tab „Anwendung“ > „Manifest“ > „Installierbarkeit“.

Sie können entscheiden, welche Art von Offline-Nutzung Sie anbieten möchten. Idealerweise sollten Sie so viel von Ihrer Erfahrung wie möglich bereitstellen. Sie können zumindest eine einfache Offline-Fallback-Seite erstellen.

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

Informationen zu den ersten Schritten finden Sie unter Workbox. Es enthält eine Reihe von Bibliotheken, die einen produktionsreifen Service Worker für Ihre PWA unterstützen. Wenn Sie eine einfache Offline-Fallback-Seite erstellen möchten, enthält der Artikel Offline-Fallback-Seite erstellen den gesamten erforderlichen Code, den Sie kopieren und direkt in Ihre Website einfügen können.

Web Share und Web Share Target für Computer

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 seit einiger Zeit für Mobilgeräte verfügbar, werden aber jetzt unter ChromeOS und Windows unterstützt.

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

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/*"],
      },
    ],
  },
},

Weitere Informationen finden Sie unter In die Web Share API-UI zur Freigabe des Betriebssystems integrieren und Empfang freigegebener Daten mit der Web Share Target API.

Und noch mehr

Und natürlich gibt es noch viel mehr.

In Chrome ist jetzt die Top-Level-await in JavaScript-Modulen zulässig.

Neues Installationssymbol für die Omnibox für PWAs

Um Nutzer besser zu verstehen, haben wir das Symbol für installierbare PWAs in der Omnibox aktualisiert.


Wenn Sie Ihre PWA im Play Store für ChromeOS über eine vertrauenswürdige Webaktivität verfügbar gemacht haben, können Sie sich für den Ursprungstest der Digital Goods API registrieren.

Weitere Informationen

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

Abo

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, sobald ein neues Video veröffentlicht wird.

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

Guthaben

Die Fotos der Raspberry Pis und Arduino wurden von Harrison Broadbent auf Unsplash veröffentlicht.