Neu in Chrome 97

Pete LePage

Dazu sollten Sie Folgendes wissen:

Frohes neues Jahr! Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es bei Chrome 97 Neues für Entwickler gibt.

Web-Transport

Wenn Sie WebSockets oder die WebRTC Data Channel API verwenden, um Nachrichten zwischen Ihrem Server und der Seite zu senden, gibt es eine neue Option für Sie. WebTransport ist eine neue API, die bidirektionales Client-Server-Messaging mit niedriger Latenz bietet.

Sie hat eine geringere Latenz als WebSockets und im Gegensatz zur RTC Data Channel API, die für Peer-to-Peer-Messaging entwickelt wurde, wurde die Web Transport API speziell für Client-Server-Messaging entwickelt.

Sie unterstützt das zuverlässige Senden von Daten mit den Stream-APIs und das unzuverlässige mit den Datagram APIs. Es wird von Web Workern unterstützt. Und da es eine Stream-kompatible Schnittstelle bereitstellt, unterstützt es Optimierungen im Hinblick auf einen Gegendruck.

Für die Verwendung benötigen Sie einen Server, der HTTP/3 unterstützt. Dies ist in der Regel einfacher als die Einrichtung und Wartung eines WebRTC-Servers. Öffnen Sie eine neue WebTransport-Instanz, warten Sie, bis die Verbindung hergestellt wurde und Sie mit dem Senden von Daten beginnen können.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Weitere Informationen finden Sie im Artikel Experimenting with WebTransport auf web.dev.

Skripttyp-Featureerkennung

Heute lässt sich mit dem Attribut nomodule ermitteln, ob JavaScript-Module im Browser unterstützt werden. Es gibt jedoch mehrere neue Funktionsvorschläge in der Pipeline, z. B. Importkarten, Spekulationsregeln und das Vorabladen von Bundles. Wir müssen herausfinden, was ein Browser unterstützt.

Geben Sie HTMLScriptElement.supports() ein. Sie können damit ermitteln, welche Skripttypen Sie verwenden können, und dem Browser die beste Option senden.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Neue Array-Prototypen

Ich liebe es, wenn JavaScript einfacher wird. Array und TypedArray unterstützen jetzt die statischen Methoden findLast() und findLastIndex().

Diese Funktionen sind im Grunde die gleichen wie find() und findIndex(), aber die Suche erfolgt am Ende eines Arrays statt am Anfang.

Um beispielsweise die letzte Zahl in einem Array zu finden, die größer als zehn ist, rufen Sie findLast() mit einer Testfunktion auf, die prüft, ob der Wert größer als zehn ist. Dann können Sie loslegen.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Chrome 100 im UA-String emulieren

In wenigen Monaten gibt es Chrome 100, eine dreistellige Versionsnummer. Jeder Code, der Versionsnummern überprüft oder den UA-String parst, sollte überprüft werden, um sicherzustellen, dass er drei Ziffern verarbeiten kann.

Das Flag #force-major-version-to-100 ändert die aktuelle Versionsnummer in 100, damit alles wie erwartet funktioniert.

Seite mit den Chrome-Flags, die die neue Option „#force-major-version-to-100“ hervorheben

…und vieles mehr

Natürlich gibt es noch viel mehr.

Neue Zeilen in Formulareinträgen werden jetzt auf die gleiche Weise wie bei Gecko und WebKit normalisiert, wodurch die Interoperabilität zwischen Browsern verbessert wird.

Wir standardisieren die Namen von Clienthinweisen mit dem Präfix sec-ch. Aus dpr wird beispielsweise sec-ch-dpr. Vorhandene Versionen dieser Hinweise werden weiterhin unterstützt, Sie sollten sich jedoch darauf vorbereiten, dass sie eingestellt oder entfernt werden.

Geschlossene <details>-Elemente sind jetzt suchbar und können verknüpft werden. Diese ausgeblendeten Elemente werden automatisch maximiert, wenn „Auf Seite suchen“, ScrollToTextFragment und die Elementfragment-Navigation verwendet werden.

Weitere Informationen

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

Abo

Abonnieren Sie den YouTube-Kanal für Chrome-Entwickler, um auf dem Laufenden zu bleiben. Dann werden Sie per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 98 veröffentlicht wird, melde ich Ihnen, was es bei Chrome Neues gibt.