Neu in Chrome 97

Pete LePage

Dazu sollten Sie Folgendes wissen:

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

Web Transport

Wenn Sie Web Sockets oder die WebRTC Data Channel API zum Senden von Nachrichten zwischen Ihrem Server und der Seite verwenden, gibt es eine neue Option für Sie. WebTransport ist eine neue API, die bidirektionale Client-Server-Messaging-Funktionen mit niedriger Latenz bietet.

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

Es unterstützt das Senden von Daten zuverlässig mit seinen Streams APIs und unzuverlässig mit seinen Datagram APIs. Es wird in Web Workern unterstützt. Da es eine Streams-kompatible Schnittstelle bietet, unterstützt es Optimierungen im Zusammenhang mit Backpressure.

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

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 Experimentieren mit WebTransport auf web.dev.

Erkennung von Skripttypen

Heute können wir das nomodule-Attribut verwenden, um die Unterstützung von JavaScript-Modulen im Browser zu erkennen. Es gibt aber mehrere neue Vorschläge für Funktionen, darunter Importkarten, Spekulationsregeln und das Vorladen von Bundles. Wir müssen wissen, was ein Browser unterstützt.

Geben Sie HTMLScriptElement.supports() ein. So können Sie festlegen, welche Arten von Scripts verwendet werden 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 finde es toll, wenn JavaScript einfacher wird. Array und TypedArray unterstützen jetzt die statischen Methoden findLast() und findLastIndex().

Diese Funktionen entsprechen im Grunde find() und findIndex(), suchen aber vom Ende eines Arrays aus, anstatt vom Anfang.

Wenn Sie beispielsweise die letzte Zahl in einem Array ermitteln möchten, die größer als zehn ist, rufen Sie findLast() mit einer Testfunktion auf, die prüft, ob der Wert größer als zehn 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 werden wir Chrome 100 erreichen, eine dreistellige Versionsnummer. Jeder Code, der Versionsnummern prüft oder den UA-String analysiert, sollte überprüft werden, um sicherzustellen, dass er drei Ziffern verarbeitet.

Mit dem Flag #force-major-version-to-100 wird die aktuelle Versionsnummer in 100 geändert, damit Sie prüfen können, ob alles wie erwartet funktioniert.

Chrome-Flags-Seite mit hervorgehobener neuer Option „#force-major-version-to-100“

…und vieles mehr

Natürlich gibt es noch viel mehr.

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

Wir standardisieren die Namen von Clienthinweisen, indem wir ihnen das Präfix sec-ch voranstellen. Aus dpr wird beispielsweise sec-ch-dpr. Wir unterstützen weiterhin vorhandene Versionen dieser Hinweise, Sie sollten jedoch mit ihrer Einstellung und Entfernung rechnen.

Geschlossene <details>-Elemente können jetzt gesucht werden und verknüpft werden. Diese ausgeblendeten Elemente werden automatisch maximiert, wenn Sie „Auf der Seite suchen“, ScrollToTextFragment oder die Navigation für Elementfragmente verwenden.

Weitere Informationen

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

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 98 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.