New in Chrome 103

Pete LePage

Here's what you need to know:

There's a new HTTP 103 status code that helps the browser decide what content to preload before the page has even started to arrive.
The Local Font Access API gives web applications the ability to enumerate and use fonts installed on the user's computer.
AbortSignal.timeout() is an easier way to implement timeouts on asynchronous APIs.
And there's plenty more.

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 103.

HTTP 103 status code 103 - early hints

One way you can improve page performance is to use resource hints. They give the browser "hints" about what stuff it might need later. For example, preloading files, or connecting to a different server.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

But the browser can't act on those hints until the server sends at least part of the page.

Imagine the browser requests a page, but the server requires a few hundred milliseconds to generate it. Until the browser starts to receive the page, it just sits there and waits. But, if the server knows the page will always need a certain set of subresources, for example, a CSS file, some JavaScript, and a few images, it can immediately respond with the new HTTP 103 Early Hints status code, and ask the browser to preload those subresources.

Then, once the server has generated the page, it can send it with the normal HTTP 200 response. As the page comes in, the browser has already started loading the required resources.

Since this is a new HTTP status code, using it requires updates to your server.

Get started with HTTP 103 Early hints:

Local Font Access API

Fonts on the web have always been a challenge, and especially so for apps that let users create their own graphics and designs. Until now, web apps could only really use web fonts. There was no way to get a list of fonts the user had installed on their computer. And, there was no way to access the full font table data, critical if you need to implement your own custom text stack.

The new Local Font Access API gives web applications the ability to enumerate the local fonts on the user's device, and provides access to the font table data.

To get a list of fonts installed on the device, you'll first need to request permission.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Then, call window.queryLocalFonts(). It returns an array of all the fonts installed on the users device.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

If you're only interested in a subset of fonts, you can filter them by adding a postscriptNames parameter.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Check out Tom's article Use advanced typography with local fonts on web.dev for complete details.

Easier Timeouts with AbortSignal.timeout()

In JavaScript, AbortController and AbortSignal are used to cancel an asynchronous call.

For example, when making a fetch() request, you can create an AbortSignal, and pass it to fetch(). If you want to cancel the fetch() before it returns, call abort() on the instance of the AbortSignal. Up until now, if you wanted it to abort after a specific amount of time, you'd need to wrap it in a setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Thankfully, that just got easier with a new timeout() static method on AbortSignal. It returns an AbortSignal object that is automatically aborted after the given number of milliseconds. What used to be a handful of lines of code, is now just one.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() is supported in Chrome 103, and is already in Firefox, and Safari.

And more!

Of course there's plenty more.

The avif image file format is now sharable by Web Share
Chromium now matches Firefox by firing popstate immediately after URL changes. The order of events is now: popstate then hashchange on both platforms.
And Element.isVisible() tells you whether an element is visible or not.

Note: In the video, I mentioned Element.isVisible() is available in stable, but it is currently only available behind a feature flag.

New in Chrome 103

HTTP 103 status code 103 - early hints

Local Font Access API

Easier Timeouts with AbortSignal.timeout()

And more!

Further reading

Subscribe