New in Chrome 97

Pete LePage

Here's what you need to know:

WebTransport is a new option for sending real time messages between the client and server.
You can use feature detection to see what types of scripts a browser supports.
Searching arrays from the end becomes a little easier.
And there's plenty more.

Happy New Year! I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 97.

Web Transport

If you're using Web Sockets or the WebRTC Data Channel API to send messages between your server and the page, there's a new option for you. WebTransport is a new API offering low-latency, bidirectional, client-server messaging.

It has lower latency than WebSockets, and unlike the RTC Data Channel API, which is designed for peer-to-peer messaging, the Web Transport API is specifically designed for client-server messaging.

It supports sending data, reliably with its streams APIs, and unreliably with its datagram APIs. It's supported in web workers. And because it exposes a Streams compliant interface, it supports optimizations around backpressure.

To use it, you'll need a server that supports HTTP/3, which is generally easier than setting up and maintaining a WebRTC server. Open a new WebTransport instance, wait for it to connect, and you can start sending data.

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);

Check out the article Experimenting with WebTransport on web.dev for complete details.

Script type feature detection

Today, we can use the nomodule attribute to detect support for JavaScript modules in the browser. But there are several new feature proposals in the pipeline, like import maps, speculation rules, and bundle preloading. We need a way to know what a browser supports.

Enter HTMLScriptElement.supports(). You can use it to determine what types of scripts you can use, and send the browser the best option.

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

New array prototypes

I love it when JavaScript gets easier. Array and TypedArray now support the findLast() and findLastIndex() static methods.

These functions are effectively the same as find() and findIndex(), but search from the end of an array instead of the beginning.

For example, to find the last number in an array that is larger than ten, call findLast() with a test function that checks if the value is greater than ten, and you're good to go.

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

Emulate Chrome 100 in the UA string

In just a few months, we'll hit Chrome 100, a three digit version number. Any code that checks version numbers, or parses the UA string, should be checked to make sure it handles three digits.

There's a flag called #force-major-version-to-100 that will change the current version number to 100, so you can make sure everything works as expected.

Chrome flags page highlighting new #force-major-version-to-100 option

And more!

Of course there's plenty more.

New lines in form entries are now normalized in the same way as Gecko and WebKit, improving interoperability between browsers.

We're standardizing client hint names by prefixing them with sec-ch. For example, dpr becomes sec-ch-dpr. We'll continue to support existing versions of these hints, but you should plan for their eventual deprecation and removal.

Closed <details> elements are now searchable and can be linked to. These hidden elements will automatically expand when find in page, ScrollToTextFragment, and element fragment navigation are used.