Neu in Chrome 107

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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

  • Mit der deklarativen PendingBeacon API gibt es eine neue Möglichkeit, Daten in der Ursprungstestversion an einen Backend-Server zu senden. Und es gibt noch viel mehr.

  • Und es gibt noch viele weitere Funktionen.

Ich bin Adriana Jara. Sehen wir uns nun an, was für Entwickler bei Chrome 107 neu ist.

Neue Properties in der Screen Capture API

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

Die Property selfBrowserSurface wurde der DisplayMediaStreamOptions hinzugefügt. Durch diesen 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 Sie sich versehentlich selbst aufnehmen, und der Spiegelkabinett-Effekt, der bei Videokonferenzen auftritt, wird vermieden.

DisplayMediaStreamOptions hat jetzt auch die Property surfaceSwitching. Mit dieser Eigenschaft können Sie programmatisch festlegen, 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 „Videokonferenz“ zurückkehren oder aus einer langen Liste von Tabs auswählen zu müssen. Das Verhalten wird jedoch nur dann angezeigt, wenn die Webanwendung es nicht selbst verarbeitet.

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

Außerdem wird durch MediaTrackConstraintSet die Property displaySurface hinzugefügt. Wenn getDisplayMedia() aufgerufen wird, bietet der Browser dem Nutzer die Wahl zwischen verschiedenen Anzeigeflächen: Tabs, Fenster oder Monitore. Mit der Einschränkung displaySurface kann die Webanwendung dem Browser jetzt mitteilen, ob einer der Oberflächentypen bevorzugt werden soll.

So lässt sich beispielsweise verhindern, dass zu viele Daten geteilt werden, da standardmäßig nur ein Tab geteilt wird. Screenshots der Aufforderungen der alten und neuen Medienauswahl

Ressourcen identifizieren, die das Rendering blockieren

Zuverlässige Informationen zur Leistung einer Seite sind für Entwickler entscheidend, um eine schnelle Nutzererfahrung zu ermöglichen. Bisher haben Entwickler komplexe Heuristiken verwendet, um zu bestimmen, ob eine Ressource das Rendern blockiert oder nicht.

Die Performance API enthält jetzt das Attribut „renderBlockingStatus“, das ein direktes Signal vom Browser liefert, das die Ressourcen identifiziert, die verhindern, dass Ihre Seite angezeigt wird, bis sie heruntergeladen wurden.

Das Code-Snippet hier zeigt, wie Sie eine Liste aller Ressourcen abrufen und mit der neuen Eigenschaft 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 Sie das Laden Ihrer Ressourcen optimieren, können Sie die Core Web Vitals verbessern und die Nutzerfreundlichkeit erhöhen. In der MDN-Dokumentation finden Sie weitere Informationen zur Performance API. Suchen Sie nach Ressourcen, die das Rendern blockieren, und optimieren Sie 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.

In Anwendungen werden diese Beacons häufig am Ende des Besuchs eines Nutzers gesendet. Es gibt jedoch keinen geeigneten Zeitpunkt für diesen „Senden“-Aufruf. Diese API delegiert das Senden an den Browser selbst, sodass sie Beacons auf page unload oder auf page hide unterstützen kann, ohne dass der Entwickler Sendeaufrufe genau zum richtigen Zeitpunkt implementieren muss.

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

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Der expect-ct-HTTP-Header wird nicht mehr unterstützt.
  • Das rel-Attribut wird jetzt für <form>-Elemente unterstützt.
  • Letztes Mal habe ich die grid-templateInterpolation erwähnt. Diesmal sollte sie enthalten sein.

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Informationen zu den Änderungen in Chrome 107.

Abonnieren

Wenn du auf dem Laufenden bleiben möchtest, abonniere den YouTube-Kanal für Chrome-Entwickler. Du wirst dann per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 108 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.