Neu in Chrome 107

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Ich bin Adriana Jara. Sehen wir uns an, was es in Chrome 107 Neues für Entwickler gibt.

Neue Properties in der Screen Capture API

In dieser Version werden der Screen Capture API neue Properties hinzugefügt, um die Bildschirmfreigabe zu verbessern.

Die DisplayMediaStreamOptions hat die selfBrowserSurface-Property hinzugefügt. Mit diesem Hinweis kann die Anwendung dem Browser mitteilen, dass beim Aufrufen von getDisplayMedia() der aktuelle Tab ausgeschlossen werden soll.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

So wird verhindert, dass versehentlich das eigene Bild aufgenommen wird, und der „Spiegelkabinett“-Effekt, den wir aus Videokonferenzen kennen, wird vermieden.

DisplayMediaStreamOptions hat jetzt auch das Attribut surfaceSwitching. Mit dieser Property wird eine Option hinzugefügt, mit der sich programmatisch steuern lässt, ob in Chrome während der Bildschirmfreigabe eine Schaltfläche zum Wechseln von Tabs angezeigt wird. Diese Optionen werden an getDisplayMedia() übergeben. Über die Schaltfläche Share this tab instead können Nutzer zu einem neuen Tab wechseln, ohne zum Tab für die Videokonferenz zurückzukehren oder einen Tab aus einer langen Liste auszuwählen. Das Verhalten wird jedoch nur unter bestimmten Bedingungen angezeigt, falls die Webanwendung es nicht verarbeitet.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Außerdem wird durch MediaTrackConstraintSet das Attribut displaySurface hinzugefügt. Wenn getDisplayMedia() aufgerufen wird, bietet der Browser dem Nutzer eine Auswahl an Anzeigeoberflächen: Tabs, Fenster oder Monitore. Mit der Einschränkung displaySurface kann die Web-App dem Browser jetzt mitteilen, ob einer der Oberflächentypen bevorzugt angeboten werden soll.

So kann beispielsweise verhindert werden, dass versehentlich zu viele Informationen geteilt werden, da das Teilen eines einzelnen Tabs als Standard festgelegt werden kann. Screenshots der alten und neuen Aufforderungen zur Media-Auswahl.

Ressourcen identifizieren, die das Rendering blockieren

Zuverlässige Informationen zur Leistung einer Seite sind für Entwickler entscheidend, um schnelle Nutzererfahrungen zu ermöglichen. Bisher haben sich Entwickler auf komplexe Heuristiken verlassen, um festzustellen, ob eine Ressource das Rendering blockiert oder nicht.

Die Performance API enthält jetzt das Attribut „renderBlockingStatus“, das ein direktes Signal vom Browser liefert, mit dem die Ressourcen identifiziert werden, die das Anzeigen Ihrer Seite verhindern, bis sie heruntergeladen wurden.

Das Code-Snippet hier zeigt, wie Sie eine Liste aller Ihrer Ressourcen abrufen und mit der neuen Property „renderBlockingStatus“ alle Ressourcen auflisten, die das Rendering blockieren.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Wenn ihr das Laden eurer Ressourcen optimiert, hilft das bei den Core Web Vitals und sorgt für eine bessere Nutzererfahrung. Weitere Informationen zur Performance API findet ihr in der MDN-Dokumentation. Sucht nach Ressourcen, die das Rendering blockieren, und optimiert sie.

Ursprungstest der PendingBeacon API

Mit der deklarativen PendingBeacon API kann der Browser steuern, wann Beacons gesendet werden.

Ein Beacon ist ein Datenpaket, das an einen Backend-Server gesendet wird, ohne dass eine bestimmte Antwort erwartet wird.

Anwendungen möchten diese Beacons oft am Ende des Besuchs eines Nutzers senden, aber es gibt keinen guten Zeitpunkt für diesen „Sende“-Aufruf. Diese API delegiert das Senden an den Browser selbst, sodass Beacons auf page unload oder page hide unterstützt werden können, ohne dass der Entwickler Sendeaufrufe genau zum richtigen Zeitpunkt implementieren muss.

Melden Sie sich für den Ursprungstest an, probieren Sie die API aus und senden Sie uns Feedback, damit wir die Anwendungsfälle verbessern können.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Der HTTP-Header expect-ct wurde verworfen.
  • Das Attribut rel wird jetzt für <form>-Elemente unterstützt.
  • Letztes Mal habe ich die grid-template-Interpolation erwähnt. Dieses Mal sollte sie enthalten sein.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Weitere Änderungen in Chrome 107 finden Sie unter den Links unten.

Abonnieren

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

Ich bin Adriana Jara und sobald Chrome 108 veröffentlicht wird, bin ich hier, um euch zu erzählen, was es Neues in Chrome gibt.