Neu in Chrome 124

Pete LePage

Hier sind die Highlights in Chrome 124:

Du möchtest mehr darüber erfahren? Weitere Informationen finden Sie in den Versionshinweisen zu Chrome 124.

Deklaratives Shadow-DOM in JavaScript verwenden

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

setHTMLUnsafe() ähnelt innerHTML und ermöglicht es, den inneren HTML-Code eines Elements auf den angegebenen String festzulegen. Dies ist hilfreich, wenn Sie HTML wie dieses haben, das ein deklaratives Shadow DOM enthält.

<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 jedoch 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, was bedeutet, dass sie keine Eingabebereinigung vornehmen. Sie sollten also darauf achten, dass alles, was Sie füttern, sicher ist. In einem zukünftigen Release erwarten wir eine Version, die eine 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, um Daten zwischen dem Browser des Nutzers und dem Server zu senden, ohne auf Polling angewiesen zu sein. Das ist ideal für Chat-Apps, in denen Sie Informationen so schnell wie möglich verarbeiten möchten.

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

Das wird Rückdruck genannt und kann bei dir zu ernsthaften Kopfschmerzen führen. Leider bietet die WebSocket API keine gute Möglichkeit, mit Backpressure umzugehen.

Die WebSocket Stream API bietet die Vorteile von Streams und WebSockets. Das bedeutet, dass Backpressure ohne zusätzliche Kosten angewendet werden kann.

Erstelle zuerst eine neue WebSocketStream und übergebe ihr 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 wurde. Dies führt zu einem ReadableStream und einem WritableStream. Wenn du die Methode ReadableStream.getReader() aufrufst, erhältst du eine ReadableStreamDefaultReader, aus der du dann Daten read() kannst, bis der Stream fertig ist.

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

Verbesserungen bei Übergängen ansehen

Ich freue mich auf die Funktionen für Ansichtsübergänge. In Chrome 124 gibt es zwei neue Funktionen, die die Ansichtsübergänge vereinfachen sollen.

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

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

Außerdem können Sie das Rendern eines Dokuments blockieren, bis die wichtigen Inhalte geparst wurden. So wird in allen Browsern eine einheitliche First Paint sichergestellt.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • disallowReturnToOpener weist den Browser darauf hin, dass im Bild-im-Bild-Fenster keine Schaltfläche angezeigt werden sollte, über die der Nutzer zum Öffnenden-Tab zurückkehren kann.

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

  • Bei der universellen Installation können Nutzer jede Seite installieren, auch solche, die die aktuellen PWA-Kriterien nicht erfüllen.

Weitere Informationen

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

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 Pete LePage. Sobald Chrome 125 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.