Neu in Chrome 124

Pete LePage

Hier die Highlights in Chrome 124:

Möchtest du alle Details erfahren? Versionshinweise für Chrome 124

Deklaratives Shadow-DOM in JavaScript verwenden

Es gibt zwei neue APIs, mit denen das deklarative Shadow-DOM über JavaScript verwendet werden kann.

setHTMLUnsafe() ähnelt innerHTML. Damit können Sie das innere HTML eines Elements auf den angegebenen String festlegen. Das ist hilfreich, wenn Sie HTML-Code mit deklarativem Shadow-DOM haben, wie hier.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Wenn Sie nur innerHTML verwenden, wird es vom Browser nicht richtig geparst und es gibt kein Shadow-DOM. Mit setHTMLUnsafe() wird das Shadow-DOM erstellt und das Element wird wie erwartet geparst.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

Die andere API ist parseHTMLUnsafe() und funktioniert ähnlich wie DOMParser.parseFromString().

Beide APIs sind unsicher, da keine Bereinigung der Eingabe erfolgt. Achten Sie also darauf, dass alles, was Sie ihnen geben, sicher ist. In einer zukünftigen Version wird voraussichtlich eine Version bereitgestellt, die die Bereinigung der Eingabe ermöglicht.

Beide APIs werden bereits in der neuesten Version von Firefox und Safari unterstützt.

WebSocket Stream API

WebSockets sind eine hervorragende Möglichkeit, Daten zwischen dem Browser des Nutzers und dem Server hin- und herzusenden, ohne auf Polling angewiesen zu sein. Das ist ideal für Chat-Apps, in denen Sie Informationen sofort verarbeiten möchten, sobald sie eingehen.

Was aber, wenn die Daten schneller eintreffen, als Sie sie verarbeiten können?

Das wird als Rückstau bezeichnet und kann Ihnen einige ernsthafte Probleme bereiten. Leider bietet die WebSocket API keine gute Möglichkeit, mit Backpressure umzugehen.

Die WebSocket Stream API bietet Ihnen die Leistung von Streams und WebSockets, sodass ohne zusätzliche Kosten ein Rückstau angewendet werden kann.

Erstellen Sie zuerst ein neues WebSocketStream und übergeben Sie ihm die URL des WebSocket-Servers.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Als Nächstes warten Sie, bis die Verbindung geöffnet wird. Dies führt zu einem ReadableStream und einem WritableStream. Wenn Sie die Methode ReadableStream.getReader() aufrufen, erhalten Sie ein ReadableStreamDefaultReader, aus dem Sie dann read()-Daten abrufen können, bis der Stream beendet ist.

Rufen Sie zum Schreiben von Daten die Methode WritableStream.getWriter() auf. Dadurch erhalten Sie einen WritableStreamDefaultWriter, in den Sie dann write() können.

Verbesserungen bei Übergängen ansehen

Ich freue mich auf die View Transitions-Funktionen. In Chrome 124 gibt es zwei neue Funktionen, die View Transitions vereinfachen.

Das pageswap-Ereignis wird für das Window-Objekt eines Dokuments ausgelöst, wenn das Dokument durch ein neues Dokument ersetzt wird.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Außerdem können Sie das Rendern von Dokumenten blockieren, bis der kritische Inhalt geparst wurde. So wird in allen Browsern ein einheitliches erstes Rendern gewährleistet.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • disallowReturnToOpener gibt dem Browser Hinweise, dass im Bild-im-Bild-Fenster keine Schaltfläche angezeigt werden soll, über die der Nutzer zum Tab „Öffner“ zurückkehren kann.

  • Per Tastatur fokussierbare Scroll-Container verbessern die Barrierefreiheit, indem Scroll-Container mithilfe der sequenziellen Fokusnavigation fokussierbar gemacht werden.

  • Mit der universellen Installation können Nutzer jede Seite installieren, auch wenn sie die aktuellen PWA-Kriterien nicht erfüllt.

Weitere Informationen

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

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 125 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.