Neu in Chrome 96

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und wir sind endlich wieder im Studio. Sehen wir uns an, was es Neues für Entwickler in Chrome 96 gibt.

Manifest id für PWAs

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

Daher ist es nicht möglich, eines dieser Felder zu ändern, ohne den Installationsvorgang zu unterbrechen. Es gibt jetzt ein neues optionales id-Attribut, mit dem Sie die Kennung für Ihre PWA explizit definieren können.

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

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

Die Unterstützung für die id-Eigenschaft ist in Chromium-basierten Desktopbrowsern ab Chrome 96 verfügbar. Die Unterstützung für Mobilgeräte, bei denen derzeit die Manifest-URL als eindeutige ID verwendet wird, soll in der ersten Hälfte des Jahres 2022 eingeführt werden.

Entwicklertools mit berechneter App-ID

Wenn Sie bereits eine PWA in der Produktion haben und Ihrem Manifest eine id hinzufügen möchten, müssen Sie die ID verwenden, die vom Browser zugewiesen wurde. Sie finden id in den Entwicklertools im Bereich Anwendung auf dem Tab Manifest.

Bei einer brandneuen PWA können Sie id auf einen beliebigen Stringwert festlegen. Denken Sie aber daran, dass Sie ihn später nicht mehr ändern können. Wählen Sie ihn also mit Bedacht aus.

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

Weitere Informationen finden Sie unter PWAs mit der ID-Eigenschaft des Web-App-Manifests eindeutig identifizieren.

URL-Protokoll-Handler für PWAs

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

Ab Chrome 96 kann eine PWA bei der Installation als Protokollhandler registriert werden. Fügen Sie dazu Ihrem Web-App-Manifest die Property protocol_handlers hinzu, geben Sie die protocol an, die verarbeitet werden soll, und die url, die beim Klicken geöffnet werden soll.

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

Hier gibt es einige Einschränkungen und Sie können nicht einfach ein beliebiges Protokoll registrieren. Weitere Informationen dazu, wie Sie mit der web+-Syntax eigene Protokolle erstellen können, finden Sie unter Registrierung von URL-Protokoll-Handlern für PWAs.

Prioritätshinweise (Ursprungstest)

Wenn ein Browser eine Webseite parst und beginnt, Ressourcen wie Bilder, Skripts oder CSS zu erkennen und herunterzuladen, weist er ihnen eine Abrufpriorität zu, um das Laden der Seite zu optimieren. Browser sind recht gut darin, Prioritäten zuzuweisen, aber das ist möglicherweise 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 können Sie die Priorität für Ressourcentypen wie CSS, Schriftarten, Skripts, Bilder und iFrames angeben.

<!-- 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>

Hier sehen Sie beispielsweise die Google Flüge-Seite. Dieses Hintergrundbild ist das Largest Contentful Paint (LCP).

Screenshot von Google Flüge mit großem Hintergrundbild

Sehen wir uns an, wie die Seite mit und ohne Prioritätshinweise geladen wird. Wenn die Priorität des Hintergrundbilds auf high festgelegt ist, sinkt der LCP von 2,6 Sekunden auf 1,9 Sekunden.

Weitere Informationen, eine Anleitung zur Registrierung für den Origin Trial und einige gute Beispiele dafür, wie die API zur Verbesserung der Rendering-Leistung beitragen kann, finden Sie unter Ressourcenladezeiten mit der Fetch Priority API optimieren.

Chrome 100 im UA-String emulieren

Anfang nächsten Jahres erreichen wir Chrome 100, eine dreistellige Versionsnummer. Jeder Code, der Versionsnummern prüft oder den UA-String parst, sollte so angepasst werden, dass er dreistellige Versionsnummern verarbeiten kann.

Ab Chrome 96 gibt es ein neues Flag #force-major-version-to-100, mit dem die aktuelle Versionsnummer in 100 geändert wird. So können Sie prüfen, ob alles wie erwartet funktioniert.

Die Seite „Chrome-Flags“ mit der neuen Option „#force-major-version-to-100“

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

Chrome Dev Summit

Die Chrome Dev Summit ist vorbei. Alle Videos und Inhalte sind online verfügbar. Auf der Chrome Dev Summit-Website findest du weitere Informationen. Wenn du die Keynote oder den Livestream verpasst hast, kannst du dir die CDS-Playlist auf dem YouTube-Kanal für Chrome-Entwickler ansehen.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Der Back-Forward-Cache (bfcache) ist jetzt in der stabilen Version verfügbar und Chrome ist damit auf dem gleichen Stand wie Firefox und Safari.

Weitere Informationen

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

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

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