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

WebHID, WebNFC und Web Serial

Ich freue mich sehr auf WebHID, WebNFC und Web Serial. Sie eröffnen Nutzern neue Möglichkeiten, mit echter Hardware zu interagieren.

Sie ermöglichen es Makern, eine Verbindung zu lustiger, schrulliger Hardware und Videokonferenz-Apps herzustellen und die speziellen Telefontasten auf speziellen Lautsprechern zu verwenden. oder für eine Vielzahl anderer Anwendungsfälle.

Mit Web Serial und ungefähr 60 Codezeilen 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 ein lustiges Gedächtnisspiel mit Web NFC entwickelt. Sie mussten das Smartphone in der richtigen Reihenfolge auf die richtige Karte halten.

StreamDeck mit Daft Punk-Drum-Pad

Und mein Favorit: @bramus hat WebHID verwendet, um eine Verbindung zu einem StreamDeck herzustellen und ein Daft Punk-Drumpad zu bauen. Wenn du kein StreamDeck hast, sieh dir sein Demovideo auf YouTube und den Code auf GitHub an.

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

Unter web.dev/devices finden Sie weitere Informationen zu einigen der Geräte, mit denen Sie eine Verbindung herstellen können. Außerdem können Sie sich die Erste Schritte-Anleitungen für WebHID, WebNFC und Web Serial ansehen.

Änderungen an den 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. Die Suche sollte schnell sein und der Offline-Dino sollte nie angezeigt werden.

Im Laufe des Jahres werden wir eine Lücke schließen, die es einigen Websites ermöglicht hat, die Kriterien für die Installierbarkeit zu erfüllen, ohne eine Offlinefunktion anzubieten. Wenn Ihre PWA bereits eine Offlinefunktion hat, sind Sie startklar. Es sind keine Maßnahmen erforderlich. Wenn Sie noch keine haben, sollten Sie das aber nachholen.

Ab Chrome 89 wird in den Entwicklertools auf dem Tab „Probleme“ eine Warnung angezeigt, wenn Ihre PWA im Offlinemodus keine gültige Antwort liefert. Lighthouse gibt dann an, dass ein Problem vorliegt. Die Durchsetzung beginnt in Chrome 93, das im Laufe des Jahres veröffentlicht wird.

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

Sie können festlegen, welche Art von Offlinezugriff Sie anbieten möchten. Idealerweise sollten Sie so viel wie möglich über Ihre Berufserfahrung angeben. Es kann aber auch so einfach wie eine Offline-Fallback-Seite sein.

Weitere Informationen zu dieser Änderung und den Gründen dafür finden Sie im Hilfeartikel Verbesserung der Erkennung des Offline-Supports für progressive Web-Apps.

Wenn Sie nicht sicher sind, wo Sie anfangen sollen, sehen Sie sich Workbox an. Es enthält eine Reihe von Bibliotheken, mit denen ein produktionsfertiger Dienst-Worker für Ihre PWA bereitgestellt werden kann. Wenn Sie eine einfache Offline-Fallback-Seite benötigen, finden Sie im Artikel Offline-Fallback-Seite erstellen den gesamten erforderlichen Code, den Sie 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 damit 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 aber jetzt auch 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 in Twitter teilen.

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

In den Leitfäden Integration in die Freigabeoberfläche des Betriebssystems mit der Web Share API und Freigegebene Daten mit der Web Share Target API empfangen finden Sie Informationen zum Einstieg.

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 in der Omnibox für installierbare PWAs aktualisiert.


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

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 89.

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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 90 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.

Gutschriften

Das Foto der Raspberry Pis und Arduinos stammt von Harrison Broadbent bei Unsplash.