Neu in Chrome 107

Adriana Jara

Dazu sollten Sie Folgendes wissen:

• Die Screen Capture API hat neue Eigenschaften, um die Bildschirmfreigabe zu verbessern.
• Sie können jetzt genau feststellen, ob eine Ressource auf Ihrer Seite das Rendering blockiert.

• Es gibt eine neue Möglichkeit, im Ursprungstest mit der deklarativen PendingBeacon API Daten an einen Back-End-Server zu senden. Und das ist noch viel mehr.

• Und es gibt viele weitere.

Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 107 Neues für Entwickler gibt.

Neue Eigenschaften der Screen Capture API

In dieser Version fügt die Screen Capture API neue Eigenschaften hinzu, um die Bildschirmfreigabe zu verbessern.

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

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

So lassen sich versehentliche Selbstaufnahmen vermeiden und der „Spiegelsaal“-Effekt, den wir schon in Videokonferenzen kennen, vermeiden.

DisplayMediaStreamOptionshat jetzt auch die Property surfaceSwitching. Mit dieser Eigenschaft wird eine Option hinzugefügt, mit der Sie programmatisch steuern können, ob Chrome bei der Bildschirmfreigabe eine Schaltfläche zum Wechseln von Tabs anzeigt. Diese Optionen werden an getDisplayMedia() übergeben. Mit der Schaltfläche „Share this tab instead“ können Nutzer zu einem neuen Tab wechseln, ohne zum Tab für Videokonferenzen zurückzukehren oder eine Auswahl aus einer langen Liste von Tabs zu treffen. Das Verhalten wird jedoch bedingt angezeigt, wenn 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 fügt MediaTrackConstraintSet die Property displaySurface hinzu. Wenn getDisplayMedia() aufgerufen wird, bietet der Browser dem Nutzer eine Auswahl von Anzeigeoberflächen: Tabs, Fenster oder Monitore. Mithilfe der displaySurface-Einschränkung kann die Web-App dem Browser nun einen Hinweis geben, ob einer der Oberflächentypen stärker hervorgehoben werden soll.

So lässt sich z. B. versehentlich eine übermäßige Freigabe verhindern, da die gemeinsame Nutzung eines einzelnen Tabs standardmäßig standardmäßig sein kann.

Ressourcen identifizieren, die das Rendering blockieren

Zuverlässige Informationen zur Leistung einer Seite sind für Entwickler von entscheidender Bedeutung, um eine schnelle Nutzererfahrung zu ermöglichen. Bisher haben sich Entwickler bei der Entscheidung, ob eine Ressource das Rendern blockiert oder nicht, auf komplexe Heuristiken verlassen.

Die Performance API enthält jetzt die Eigenschaft renderBlockingStatus, die dem Browser ein direktes Signal liefert, durch das die Ressourcen identifiziert werden, die die Anzeige Ihrer Seite verhindern, bis sie heruntergeladen wurden.

Das Code-Snippet hier zeigt, wie Sie eine Liste aller Ressourcen abrufen und mit der neuen Eigenschaft „renderBlockingStatus“ alle Elemente 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 Sie das Laden Ihrer Ressourcen optimieren, können Sie die Core Web Vitals optimieren und die Nutzerfreundlichkeit verbessern. In der MDN-Dokumentation erfahren Sie mehr über die Performance API. Suchen Sie nach Ressourcen, die das Rendering blockieren, und optimieren Sie Ihre Strategie.

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 eine bestimmte Antwort zu erwarten.

Anwendungen möchten diese Beacons häufig am Ende des Besuchs eines Nutzers senden, aber es gibt keinen passenden Zeitpunkt für diesen "Send"-Aufruf. Diese API delegiert das Senden an den Browser selbst, sodass sie Beacons auf page unload oder page hide unterstützen kann, ohne dass der Entwickler Sendeaufrufe genau zur richtigen Zeit implementieren muss.

Registrieren Sie sich für den Ursprungstest, 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 eingestellt.
• Das Attribut rel wird jetzt für <form>-Elemente unterstützt.
• Als ich das letzte Mal die grid-template-Interpolation erwähnt habe, sollte sie diesmal einbezogen werden.

Weitere Informationen

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

• Neu in den Chrome-Entwicklertools (107)
• Einstellung und Entfernung von Chrome 107
• Updates auf ChromeStatus.com für Chrome 107
• Änderungsliste des Chromium-Quell-Repositorys
• Release-Kalender für Chrome

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 108 veröffentlicht wird, melde ich mich mit Neuigkeiten zu Chrome.