New in Chrome 84

Pete LePage

Chrome 84 is starting to roll out to stable now.

Here's what you need to know:

Users can start common tasks within your app, with App Icon Shortcuts.
The Web Animations API adds support for a slew of previously unsupported features.
Wake lock can prevent the screen from dimming or locking.
The Content Indexing API helps surface content that is available offline.
There are new origin trials for idle detection and Web Assembly SIMD.
Same Site Cookie policy changes are starting to roll out again.
And more.

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

App icon shortcuts

App icon shortcuts make it easy for users to quick start common tasks within your app. For example, compose a new tweet, send a message, or see their notifications. They're supported in Chrome for Android.

These shortcuts are invoked by long pressing the app icon on Android. Adding a shortcut to your PWA is easy, create a new shortcuts property in your web app manifest, describe the shortcut, and add your icons.

"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Check out Getting things done quickly with app shortcuts for complete details.

Web animations API

Chrome 84 adds a slew of previously unsupported features to the Web Animations API.

animation.ready and animation.finished have been promisified.
The browser can now cleanup and remove old animations, saving memory and improving performance.
And you can now combine animations using composite modes - with the add and accumulate options.

I simply can't do justice to all the improvements or offer good examples here, so check out Web Animations API improvements in Chromium 84 for complete details.

Content indexing API

If your content is available without a network connection. But the user doesn't know about it? Is it really available? There's a discovery problem!

With the Content Indexing API, which just graduated from original trial, you can add URLs and metadata for content that's available offline. Using that metadata, the content is then surfaced to the user, improving discoverability.

To add content to the index, call index.add() on the service worker registration, and provide the required metadata about the content.

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

Want to see what's already in your index? Call index.getAll() on the service worker registration.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

See Indexing your offline-capable pages with the Content Indexing API for complete details.

Wake lock API

Wake lock implementation on the Betty Crocker website.

I like to cook, but I find it super frustrating when following a recipe, and the screen saver kicks in! With the wake lock API, which also graduates from its origin trial in Chrome 84, sites can request a wake lock to prevent the screen from dimming and locking.

In fact, the Betty Crocker website is using this today, and published a case study on web.dev showing a 300% increase in purchase intent indicators.

To get a wake lock, call navigator.wakeLock.request(), it returns a WakeLockSentinel object, used to "release" the wake lock.

// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Of course, there's a little more to it then that, so check out Stay awake with the Screen Wake Lock API, but at least my screen won't be covered in flour any more!

Origin trials

There are two new origin trials I want to call out. If you're new to origin trials, check out Getting started with Chrome's origin trials.

Idle detection

The Idle Detection API notifies you when a user is idle, indicating they are potentially away from their computer. This is great for things like chat applications, or social networking sites, to let users know if their contacts are available or not.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

See Detect inactive users with the Idle Detection API to learn more about the API, and how you can start experimenting with it today.

Web Assembly SIMD

And Web Assembly SIMD starts an origin trial. It introduces operations that map to commonly available SIMD instructions in hardware. SIMD operations are used to improve performance, especially in multimedia applications.

To learn more about WebAssembly SIMD, check out Fast, parallel applications with WebAssembly SIMD.

And more

Chrome 84 is big, but there are a few other important updates I want to point out.

We're resuming the gradual rollout of SameSite cookie changes.
Sites with abusive permission requests, or abusive notifications, will automatically be enrolled in our quieter notifications UI.
There's a new origin trial for QuicTransport.