New in Chrome 95

Pete LePage

Here's what you need to know:

Routing gets easier with URLPattern baked into the browser.
The Eye Dropper API provides a built in tool for selecting colors.
There's a new origin trial that allows you to opt into receiving the reduced UA string now.
The PWA Summit videos are all online.
And there's plenty more.

I'm Pete LePage, working, and shooting from home, let's dive in and see what's new for developers in Chrome 95.

Routing with `URLPattern`

Nearly all web apps depend on routing in some way whether it's code running on a server that maps a path to files on disk or logic in a single-page app that updates the DOM when the URL changes. URLPattern is a new web platform API that standardizes routing pattern syntax.

It builds on the foundation of existing frameworks, making it easier to perform common routing tasks. For example, matching against full URLs, or a URL pathname, then returning information about the token and group matches.

If you're already familiar with the routing syntax used in Express, Ruby on Rails, or path-to-regexp, this will probably look familiar.

To use it, create a new URLPattern() and provide the details you want to pattern match against. Patterns can contain wildcards, named token groups, regular expression groups, and group modifiers.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

For example, let's look at the URLPattern that might be used by Google Docs. We'll specify the kind of file, the file ID, and what mode to open it in. Then to use the pattern, we can call either test(), or exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern is enabled by default in Chrome and Edge version 95 and above. And for browsers or environments like Node, that don't support it yet, you can use the urlpattern-polyfill library.

Check out Jeff's article URLPattern brings routing to the web platform for complete details!

Picking colors with the Eye Dropper API

Almost every design app I've ever used has an eye dropper tool, making it easy to figure out what color something is. Some browsers have eyedropper capability built into <input type=color>, but it's not ideal.

The eye dropper API, implemented by some of the folks at Microsoft brings that functionality to the web. To use it, create a new EyeDropper() instance, then call open() on it.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Like many other modern web APIs, it works asynchronously, so that it doesn't block the main thread. When the user clicks on the color they want, it'll resolve with the color they clicked on.

You can try out a quick demo, and see the code on Glitch.

PWA Summit

Did you catch the PWA Summit earlier this month?

It was great to see so many folks talking about PWAs and sharing their experiences. If you missed it, the videos are all up, so be sure to check it out at PWASummit.org or the PWA Summit YouTube channel.

User-agent reduction origin trial

User-Agent Reduction is an effort to reduce passive finger-printing surfaces, by reducing the information in the User-Agent string to only the browser's brand and significant version, its desktop or mobile distinction, and the platform it's running on.

Starting in Chrome 95, there's a new origin trial that allows you to opt into receiving the reduced UA string now. This will enable you to discover and fix problems before the reduced UA becomes the default behavior in Chrome.

The changes will be applied incrementally over a number of releases, but everything you need to prepare and test is ready right now.

All of the details and timeline are in the User-Agent Reduction origin trial post on developer.chrome.com.

And more!

Of course there's plenty more.

If you've been following the Storage Foundation API work, there's a new origin trial for Access Handles.
WebAssembly now provides exception handling support, which allows code to break control flow when an exception is thrown.
Chrome 100 is coming next year. Which means it's time to make sure your code can handle more than two digits!

New in Chrome 95

Routing with URLPattern

Picking colors with the Eye Dropper API

PWA Summit

User-agent reduction origin trial

And more!

Further reading

Subscribe

Routing with `URLPattern`