Neu in Chrome 96

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und filme endlich im Studio. Sehen wir uns an, was in Chrome 96 für Entwickler neu ist.

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 Manifest-Spezifikation für Web-Apps jedoch nicht angegeben, wie eine PWA identifiziert werden soll. Die Entscheidung wurde den Browsern überlassen, was zu unterschiedlichen Implementierungen führte. In einigen Browsern wird start_url verwendet, in anderen der Pfad zur Manifestdatei.

Das macht es unmöglich, eines dieser Felder zu ändern, ohne die Installation zu beeinträchtigen. 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 aufgehoben und diese Felder können aktualisiert werden.

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

Die Unterstützung der id-Eigenschaft wird ab Chrome 96 in Chromium-basierten Desktop-Browsern eingeführt. Die Unterstützung für Mobilgeräte, bei denen derzeit die Manifest-URL als eindeutige ID verwendet wird, wird voraussichtlich in der ersten Jahreshälfte 2022 eingeführt.

DevTools 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 vom Browser zugewiesene ID verwenden. Sie finden die id im Bereich Manifest des Bereichs Anwendung in den Dev-Tools.

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 Manifest-ID-Eigenschaft der Web-App 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 im Rahmen ihrer Installation als Protokoll-Handler registriert werden. Fügen Sie dazu Ihrem Web-App-Manifest eine protocol_handlers-Property hinzu, geben Sie die protocol an, die Sie verarbeiten möchten, 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"
    }
  ]
}

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

Hinweise zur Priorität (Ursprungstest)

Wenn ein Browser eine Webseite parset und damit beginnt, Ressourcen wie Bilder, Scripts oder CSS zu finden und herunterzuladen, weist er ihnen eine Abrufpriorität zu, um das Laden der Seite zu optimieren. Browser können Prioritäten recht gut zuweisen, sind aber möglicherweise nicht in allen Fällen optimal.

Prioritätshinweise sind eine experimentelle Funktion, die ab Chrome 96 als Ursprungstest verfügbar ist. Sie können dabei helfen, die Core Web Vitals zu optimieren. Mit dem importance-Attribut können Sie die Priorität für Ressourcentypen wie CSS, Schriftarten, Scripts, 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 ist 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 es mit und ohne Hinweise zur Priorität geladen wird. Wenn die Priorität für das Hintergrundbild auf high festgelegt ist, sinkt der LCP von 2,6 Sekunden auf 1,9 Sekunden.

Im Hilfeartikel Optimierung des Ressourcenladens mit der Fetch Priority API finden Sie alle Details, Informationen zur Registrierung für den Ursprungstest und einige gute Beispiele dafür, wie Sie damit die Renderingleistung verbessern können.

Chrome 100 im UA-String emulieren

Anfang nächsten Jahres wird Chrome 100 veröffentlicht – eine dreistellige Versionsnummer. Jeder Code, der Versionsnummern prüft oder den UA-String analysiert, sollte überprüft werden, um sicherzustellen, dass er drei Ziffern verarbeitet.

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.

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

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

Chrome Dev Summit

Der Chrome Dev Summit ist vorbei. Alle Videos und Inhalte sind online verfügbar. Weitere Informationen finden Sie auf der Website des Chrome Dev Summits. Wenn Sie die Keynote oder den Livestream verpasst haben, sehen Sie sich die CDS-Playlist auf dem YouTube-Kanal von Chrome Developers an.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Der Cache für die Vor- und Rückwärtsnavigation (bfcache) ist jetzt in der stabilen Version verfügbar und bringt Chrome auf den neuesten Stand.

Weitere Informationen

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

Abonnieren

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

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