 Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/)
[Video](https://www.youtube.com/watch?v=PPukHsOH_BI)
Here's what you need to know:
- The [manifest `id` property](https://developer.chrome.com/blog/new-in-chrome-96.md.txt#manifest-id) lets you specify a unique ID for your PWA.
- The [`protocol_handlers` property](https://developer.chrome.com/blog/new-in-chrome-96.md.txt#pwa-protocol-handlers) allows you to automatically register your PWA as a protocol handler upon installation.
- The [priority hints origin trial](https://developer.chrome.com/blog/new-in-chrome-96.md.txt#pri-hints) allows you to specify fetch priority for downloading resources.
- You can [force the Chrome version to 100](https://developer.chrome.com/blog/new-in-chrome-96.md.txt#chrome-100) to test how your code will react to a three digit version number.
- Videos from the [Chrome Dev Summit](https://developer.chrome.com/blog/new-in-chrome-96.md.txt#cds-videos) are all online.
- And there's plenty [more](https://developer.chrome.com/blog/new-in-chrome-96.md.txt#more).
I'm [Pete LePage](https://petelepage.com), finally shooting
**in the studio**, let's dive in and see what's new for developers in Chrome 96.
## Manifest `id` for PWAs
When a user installs a PWA, the browser needs a way to uniquely identify it.
But, until recently, the web app manifest spec didn't specify how to identify
a PWA, leaving browsers to decide, and leading to different implementations.
In some browsers, the `start_url` is used, while in others, the path to the
manifest file is used.
That makes it impossible to change either of those fields without breaking the
install experience. Now, there's a new optional `id` property, that allows
you to explicitly define the identifier used for your PWA.
Adding the `id` property to the manifest removes the dependency on the
`start_url` or the location of the manifest, and makes it possible for those
fields to be updated.
{
...
id: "/?homescreen=1",
start_url: "/?homescreen=1",
...
}
Support for the `id` property lands in desktop Chromium-based browsers
starting in Chrome 96. Support for mobile, which currently uses the manifest
url as the unique ID, should land in the first half of 2022.
If you already have a PWA in production and want to add an `id` to your
manifest, you'll need to use the ID that was assigned by the browser. You can
find the `id` in the *Manifest* pane of the *Application* panel in Dev Tools.
For a brand new PWA, you can set the `id` to any string value you like, but
remember, you won't be able to change it in the future, so choose wisely.
{
...
id: "SquooshApp",
start_url: "/?homescreen=1",
...
}
Check out [Uniquely identifying PWAs with the web app manifest id property](https://developer.chrome.com/blog/pwa-manifest-id)
for more info.
## URL protocol handlers for PWAs
Web apps can use [`navigator.registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler) to
register as a protocol handler. For example, Gmail can register the `mailto`
protocol. Then when a user clicks on a link with the `mailto:` prefix, Gmail
will open, making it easy for the user to send an email.
Starting in Chrome 96, a PWA can register as a protocol handler as part of its
installation. To do that for your PWA, add a `protocol_handlers` property to
your web app manifest, specify the `protocol` you want to handle, and the
`url` that should be opened when clicked.
```json
...
"protocol_handlers": [
{
"protocol": "web+tea",
"url": "/tea?type=%s"
},
{
"protocol": "web+coffee",
"url": "/coffee?type=%s"
}
]
}
```
There are some restrictions here, and you can't just register any protocol, so
check out [URL protocol handler registration for PWAs](https://web.dev/url-protocol-handler/) for complete
details, and how you can use the `web+` syntax to create your own protocols!
## Priority hints (origin trial)
When a browser parses a web page and begins to discover and download resources
such as images, scripts, or CSS, it assigns them a fetch priority to try to
optimize the page load. Browsers are pretty good at assigning priorities, but
may not be optimal in all cases.
Priority Hints are an experimental feature, available as an
[origin trial](https://developer.chrome.com/origintrials#/view_trial/365917469723852801) starting in Chrome 96, and can help optimize the Core
Web Vitals. The `importance` attribute allows you to specify the priority
for resource types such as CSS, fonts, scripts, images, and iframes.
> [!WARNING]
> **Warning:** The `importance` attribute has been renamed `fetchpriority`. Read [Optimizing resource loading with the Fetch Priority API](https://web.dev/articles/fetch-priority) for the latest on this feature.
```html
```
For example, here's the Google Flights page. That background image is the
largest contentful paint (LCP).
Let's see it loaded with, and without priority hints. With the priority set
to `high` on the background image, the LCP drops from 2.6 seconds to 1.9
seconds.
Check out [Optimizing resource loading with the Fetch Priority API](https://web.dev/fetch-priority/) for
all the details, how to register for the origin trial, and some great examples
of how it can help to improve your rendering performance.
## Emulate Chrome 100 in the UA string
Early next year, 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.
Starting in Chrome 96, there's a new flag `#force-major-version-to-100` that
will change the current version number to 100, so you can make sure
everything works as expected.
For details see [Force Chrome major version to 100 in the User-Agent string](https://developer.chrome.com/blog/force-major-version-to-100.md.txt).
## Chrome Dev Summit
Chrome Dev Summit is a wrap. All of the videos and content are available
online. Check out the [Chrome Dev Summit site](https://developer.chrome.com/devsummit), or if you missed
the keynote or livestream, check out the [CDS Playlist](https://www.youtube.com/playlist?list=PLNYkxOF6rcIBju4hD9ed1pt6YO20LgLWg) on the
[Chrome Developers YouTube Channel](https://www.youtube.com/c/GoogleChromeDevelopers).
## And more!
Of course there's plenty more.
- The Back, forward cache -- or `bfcache` -- is now available in stable, and brings Chrome in line with both Firefox and Safari.
## Further reading
This covers only some of the key highlights. Check the links below for
additional changes in Chrome 96.
- [What's new in Chrome DevTools (96)](https://developer.chrome.com/blog/new-in-devtools-96.md.txt)
- [Chrome 96 deprecations and removals](https://developer.chrome.com/blog/deps-rems-96.md.txt)
- [ChromeStatus.com updates for Chrome 96](https://www.chromestatus.com/features#milestone%3D96)
- [What's new in JavaScript in Chrome 96](https://v8.dev/blog/v8-release-96)
- [Chromium source repository change list](https://chromium.googlesource.com/chromium/src/+log/95.0.4638.56..96.0.4664.50)
- [Chrome release calendar](https://chromiumdash.appspot.com/schedule)
## Subscribe
To stay up to date, [subscribe](https://goo.gl/6FP1a5)
to [Chrome Developers YouTube channel](https://www.youtube.com/user/ChromeDevelopers/),
and you'll get an email notification whenever we launch a new video.
I'm Pete LePage, and as soon as Chrome 97 is released, I'll be right here to
tell you what's new in Chrome!
```
For example, here's the Google Flights page. That background image is the
largest contentful paint (LCP).
Let's see it loaded with, and without priority hints. With the priority set
to `high` on the background image, the LCP drops from 2.6 seconds to 1.9
seconds.
Check out [Optimizing resource loading with the Fetch Priority API](https://web.dev/fetch-priority/) for
all the details, how to register for the origin trial, and some great examples
of how it can help to improve your rendering performance.
## Emulate Chrome 100 in the UA string
Early next year, 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.
Starting in Chrome 96, there's a new flag `#force-major-version-to-100` that
will change the current version number to 100, so you can make sure
everything works as expected.
For details see [Force Chrome major version to 100 in the User-Agent string](https://developer.chrome.com/blog/force-major-version-to-100.md.txt).
## Chrome Dev Summit
Chrome Dev Summit is a wrap. All of the videos and content are available
online. Check out the [Chrome Dev Summit site](https://developer.chrome.com/devsummit), or if you missed
the keynote or livestream, check out the [CDS Playlist](https://www.youtube.com/playlist?list=PLNYkxOF6rcIBju4hD9ed1pt6YO20LgLWg) on the
[Chrome Developers YouTube Channel](https://www.youtube.com/c/GoogleChromeDevelopers).
## And more!
Of course there's plenty more.
- The Back, forward cache -- or `bfcache` -- is now available in stable, and brings Chrome in line with both Firefox and Safari.
## Further reading
This covers only some of the key highlights. Check the links below for
additional changes in Chrome 96.
- [What's new in Chrome DevTools (96)](https://developer.chrome.com/blog/new-in-devtools-96.md.txt)
- [Chrome 96 deprecations and removals](https://developer.chrome.com/blog/deps-rems-96.md.txt)
- [ChromeStatus.com updates for Chrome 96](https://www.chromestatus.com/features#milestone%3D96)
- [What's new in JavaScript in Chrome 96](https://v8.dev/blog/v8-release-96)
- [Chromium source repository change list](https://chromium.googlesource.com/chromium/src/+log/95.0.4638.56..96.0.4664.50)
- [Chrome release calendar](https://chromiumdash.appspot.com/schedule)
## Subscribe
To stay up to date, [subscribe](https://goo.gl/6FP1a5)
to [Chrome Developers YouTube channel](https://www.youtube.com/user/ChromeDevelopers/),
and you'll get an email notification whenever we launch a new video.
I'm Pete LePage, and as soon as Chrome 97 is released, I'll be right here to
tell you what's new in Chrome!