New in Chrome 80

Pete LePage

Chrome 80 is rolling out now, and there's a ton of new stuff in it for developers!

There's support for:

Modules in workers
Optional chaining in JavaScript
New origin trials
Features that have graduated from origin trial
And so much more.

I'm Pete LePage, let's dive in and see what's new for developers in Chrome 80!

Module workers

Module Workers, a new mode for web workers - with the ergonomics, and performance benefits of JavaScript modules is now available. The Worker constructor accepts a new {type: "module"} option, which changes the way scripts are loaded and executed, to match <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Moving to JavaScript modules, also enables the use of dynamic import for lazy-loading code, without blocking the execution of the worker. Check out Jason's post Threading the web with module workers on web.dev for more details.

Optional chaining

Trying to read deeply nested properties in an object can be error-prone, especially if there's a chance something might not evaluate.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Checking each value before proceeding easily turns into a deeply nested if statement, or requires a try / catch block.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 adds support for a new JavaScript feature called optional chaining. With optional chaining, if one of the properties returns a null, or undefined, instead of throwing an error, the whole thing simply returns undefined.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Check out the Optional Chaining blog post on the v8 blog for all the details!

Origin trial graduations

There are three new capabilities that graduated from Origin Trial to stable, allowing them to be used by any site, without a token.

Periodic background sync

First up, is periodic background sync, it periodically synchronizes data in the background, so that when a user opens your installed PWA, they always have the freshest data.

Contact picker

Next up, is the Contact Picker API, an on-demand API that allows users to select entries from their contact list and share limited details of the selected entries with a website.

It allows users to share only what they want, when they want, and makes it easier for users to reach and connect with their friends and family.

Get installed related apps

And finally, the Get Installed Related Apps method allows your web app to check if your native app is installed on a user's device.

One of the most common uses cases is for deciding whether to promote the installation of your PWA, if your native app isn't installed. Or, you might want to disable some functionality of one app if it's provided by the other app.

New origin trials

Content indexing API

How do you let users know about content you've cached in your PWA? There's a discovery problem here. Will they know to open your app? Or what content is available?

The Content Indexing API, is a new origin trial, that allows you to add URLs and metadata of offline-capable content, to a local index, maintained by the browser, and easily visible to the user.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

To add something to the index, I need to get the service worker registration, then call index.add, and provide metadata about the content.

Once the index is populated, it's shown in a dedicated area of Chrome for Android's Downloads page. Check out Jeff's post Indexing your offline-capable pages with the Content Indexing API on web.dev for complete details.

Notification triggers

Notifications are a critical part of many apps. But, push notifications are only as reliable as the network you're connected to. While that works in most cases, it sometimes breaks. For example, if a calendar reminder, notifying you of an important event doesn't come through because you're in airplane mode, you might miss the event.

Notification Triggers let you schedule notifications in advance, so that the operating system will deliver the notification at the right time - even if there is no network connectivity, or the device is in battery saver mode.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

To schedule a notification, call showNotification on the service worker registration. In the notification options, add a showTrigger property with a TimestampTrigger. Then, when the time arrives, the browser will show the notification.

The origin trial is planned to run through Chrome 83, so check out Tom's Notification Triggers post on web.dev for complete details.

Other origin trials

There are a few other origin trials starting in Chrome 80:

Web Serial
The ability for PWAs to register as file handlers
New properties for the contact picker

Check for a complete list of features in origin trial.

And more

Of course, there's plenty more!

You can now link directly to text fragments on a page, by using #:~:text=something. Chrome will scroll to and highlight the first instance of that text fragment. For example https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
Setting display: minimal-ui on a Desktop PWA adds a back and reload button to the title bar of the installed PWA.
And Chrome now supports using SVG images as favicons.