Neu in Chrome 97

Pete LePage

Dazu sollten Sie Folgendes wissen:

Frohes neues Jahr! Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 97 gibt.

Web Transport

Wenn Sie WebSockets oder die WebRTC Data Channel API verwenden, um Nachrichten zwischen Ihrem Server und der Seite zu senden, haben Sie jetzt eine neue Option. WebTransport ist eine neue API, die bidirektionale Client-Server-Nachrichten mit niedriger Latenz bietet.

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

Es unterstützt das zuverlässige Senden von Daten mit seinen Stream-APIs und das unzuverlässige Senden von Daten mit seinen Datagramm-APIs. Es wird in Webworkern unterstützt. Da es eine Streams-kompatible Schnittstelle bietet, werden Optimierungen in Bezug auf Backpressure unterstützt.

Dazu benötigen Sie einen Server, der HTTP/3 unterstützt. Das ist in der Regel einfacher als das Einrichten und Warten eines WebRTC-Servers. Öffnen Sie eine neue WebTransport-Instanz, warten Sie, bis die Verbindung hergestellt ist, und beginnen Sie mit dem Senden von Daten.

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.

Erkennung von Funktionen des Skripttyps

Heute können wir das Attribut nomodule verwenden, um die Unterstützung für JavaScript-Module im Browser zu erkennen. Es gibt jedoch mehrere neue Funktionsvorschläge, die in der Pipeline sind, z. B. Importmaps, Spekulationsregeln und das Vorabladen von Bundles. Wir brauchen eine Möglichkeit, um zu wissen, was ein Browser unterstützt.

Geben Sie HTMLScriptElement.supports() ein. Damit können Sie festlegen, welche Arten von Skripts 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 freue mich, wenn JavaScript einfacher wird. Array und TypedArray unterstützen jetzt die statischen Methoden findLast() und findLastIndex().

Diese Funktionen sind im Grunde dasselbe wie find() und findIndex(), aber sie suchen ab dem Ende eines Arrays statt ab dem Anfang.

Wenn Sie beispielsweise die letzte Zahl in einem Array suchen möchten, die größer als 10 ist, rufen Sie findLast() mit einer Testfunktion auf, die prüft, ob der Wert größer als 10 ist.

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 erreichen wir Chrome 100, eine dreistellige Versionsnummer. Jeder Code, der Versionsnummern prüft oder den UA-String parst, sollte so angepasst werden, dass er dreistellige Versionsnummern verarbeiten kann.

Es gibt ein Flag namens #force-major-version-to-100, das die aktuelle Versionsnummer in 100 ändert, damit Sie sichergehen können, dass alles wie erwartet funktioniert.

Die Seite „Chrome-Flags“ mit der neuen Option „#force-major-version-to-100“

…und vieles mehr

Natürlich gibt es noch viel mehr.

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

Wir standardisieren die Namen von Client-Hinweisen, indem wir ihnen das Präfix sec-ch voranstellen. Aus dpr wird beispielsweise sec-ch-dpr. Wir werden bestehende Versionen dieser Hinweise weiterhin unterstützen, aber Sie sollten ihre endgültige Einstellung und Entfernung einplanen.

Geschlossene <details>-Elemente sind jetztsuchbar und können verlinkt werden. Diese ausgeblendeten Elemente werden automatisch maximiert, wenn die Funktionen „Auf Seite suchen“, ScrollToTextFragment und die Navigation über Elementfragmente verwendet werden.

Weitere Informationen

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

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