Neu in Chrome 96

Pete LePage

Dazu sollten Sie Folgendes wissen:

Mein Name ist Pete LePage. Ich bin endlich im Studio. Jetzt sehen wir uns an, was es bei Chrome 96 Neues für Entwickler gibt.

Manifest id für PWAs

Wenn ein Nutzer eine PWA installiert, muss der Browser sie eindeutig identifizieren können. Bis vor Kurzem war in der Manifestspezifikation für die Web-App jedoch nicht festgelegt, wie eine PWA identifiziert werden soll. Dadurch mussten Browser entscheiden, was zu unterschiedlichen Implementierungen führte. In einigen Browsern wird der start_url verwendet, in anderen hingegen der Pfad zur Manifestdatei.

Das macht es unmöglich, eines dieser Felder zu ändern, ohne die Installation zu beeinträchtigen. Jetzt gibt es eine neue optionale id-Property, mit der Sie die für Ihre PWA verwendete ID explizit definieren können.

Wenn Sie dem Manifest das Attribut id hinzufügen, ist die Abhängigkeit von start_url oder dem Speicherort des Manifests entfernt und diese Felder können aktualisiert werden.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Die Unterstützung für die Property id ist ab Chrome 96 auch in Chromium-basierten Desktop-Browsern verfügbar. Die Unterstützung für Mobilgeräte, die derzeit die Manifest-URL als eindeutige ID verwendet, sollte im ersten Halbjahr 2022 eintreffen.

Entwicklertools, die die berechnete App-ID anzeigen

Wenn Sie bereits eine PWA in der Produktion haben und Ihrem Manifest eine id hinzufügen möchten, müssen Sie die vom Browser zugewiesene ID verwenden. Sie finden das id in den Entwicklertools im Bereich Manifest des Bereichs Anwendung.

Bei einer ganz neuen PWA können Sie für id einen beliebigen Stringwert festlegen. Denken Sie jedoch daran, dass Sie ihn in Zukunft nicht mehr ändern können. Wählen Sie den Wert mit Bedacht aus.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Weitere Informationen findest du unter PWAs mithilfe der Manifest-ID-Eigenschaft der Web-App eindeutig identifizieren.

URL-Protokoll-Handler für PWAs

Webanwendungen können navigator.registerProtocolHandler() verwenden, um sich als Protokoll-Handler zu registrieren. So kann Gmail z. B. das mailto-Protokoll registrieren. Wenn ein Nutzer dann auf einen Link mit dem Präfix mailto: klickt, wird Gmail geöffnet, sodass der Nutzer ganz einfach eine E-Mail senden kann.

Ab Chrome 96 kann eine PWA bei der Installation als Protokoll-Handler registriert werden. Fügen Sie dazu dem Manifest Ihrer Web-App eine protocol_handlers-Eigenschaft hinzu und geben Sie die protocol an, die verarbeitet werden soll, sowie die url, die geöffnet werden soll, wenn darauf geklickt wird.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Es gibt hier einige Einschränkungen und Sie können nicht einfach jedes Protokoll registrieren. Ausführliche Informationen finden Sie unter URL-Protokoll-Handler für PWAs registrieren. Außerdem erfahren Sie, wie Sie mit der web+-Syntax eigene Protokolle erstellen können.

Prioritätshinweise (Ursprungstest)

Wenn ein Browser eine Webseite analysiert und Ressourcen wie Bilder, Skripts oder CSS erkennt und herunterlädt, wird ihnen eine Abrufpriorität zugewiesen, um den Seitenaufbau zu optimieren. Browser sind beim Zuweisen von Prioritäten ziemlich gut, sind aber nicht in allen Fällen optimal.

Prioritätshinweise sind eine experimentelle Funktion, die ab Chrome 96 als Ursprungstest verfügbar ist und zur Optimierung der Core Web Vitals beitragen kann. Mit dem Attribut importance kannst du die Priorität für Ressourcentypen wie CSS, Schriftarten, Skripts, Bilder und iFrames festlegen.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Ein Beispiel hierfür ist die Seite von Google Flüge. Dieses Hintergrundbild ist der Largest Contentful Paint (LCP).

Screenshot von Google Flüge mit großem Hintergrundbild

Sehen wir uns an, ob sie mit und ohne Prioritätshinweise geladen ist. Wenn die Priorität für das Hintergrundbild auf high gesetzt ist, sinkt der LCP von 2,6 Sekunden auf 1,9 Sekunden.

Unter Das Laden von Ressourcen mit der Fetch Priority API optimieren finden Sie alle Details, eine Anleitung zur Registrierung für den Ursprungstest und einige großartige Beispiele, wie Sie damit Ihre Rendering-Leistung verbessern können.

Chrome 100 im UA-String emulieren

Anfang nächsten Jahres werden wir Chrome 100 einführen, eine dreistellige Versionsnummer. Jeder Code, der Versionsnummern überprüft oder den UA-String parst, sollte geprüft werden, damit er drei Ziffern verarbeiten kann.

Ab Chrome 96 gibt es das neue Flag #force-major-version-to-100, das die aktuelle Versionsnummer in 100 ändert, damit alles wie erwartet funktioniert.

Seite mit den Chrome-Flags, in denen die neue Option „#force-major-version-to-100“ hervorgehoben ist

Weitere Informationen finden Sie unter Chrome-Hauptversion im User-Agent-String auf 100 erzwingen.

Chrome Dev Summit

Der Chrome Dev Summit ist beendet. Alle Videos und Inhalte sind online verfügbar. Besuchen Sie die Website des Chrome Dev Summit oder sehen Sie sich die CDS-Playlist auf dem YouTube-Kanal für Chrome-Entwickler an, wenn Sie die Keynote oder den Livestream verpasst haben.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Der Back-Forward-Cache – oder bfcache – ist jetzt in stabil verfügbar und passt Chrome an Firefox und Safari an.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 96.

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 97 veröffentlicht wird, melde ich mich mit Informationen zu den Neuheiten in Chrome.