New in Chrome 103

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="https://web-dev.imgix.net"
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: ,
};
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.