New in Chrome 97
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.
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.
Further reading
This covers only some of the key highlights. Check the links below for additional changes in Chrome 97.
- What's new in Chrome DevTools (97)
- Chrome 97 deprecations and removals
- ChromeStatus.com updates for Chrome 97
- What's new in JavaScript in Chrome 97
- Chromium source repository change list
- Chrome release calendar
Subscribe
To stay up to date, subscribe to Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.
I'm Pete LePage, and as soon as Chrome 98 is released, I'll be right here to tell you what's new in Chrome!