New in Chrome 76

Pete LePage

In Chrome 76, we've added support for:

prefers-color-scheme media query, bringing dark mode to websites.
An install button in the omnibox to make installation of Progressive Web Apps on desktop easier.
Preventing the mini-infobar from appearing on Progressive Web Apps on mobile.
More frequent updates of WebAPKs.
And plenty more.

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

PWA Omnibox Install Button

In Chrome 76, we're making it easier for users to install Progressive Web Apps on the desktop, by adding an install button to the address bar, sometimes called the omnibox.

If your site meets the Progressive Web App installability criteria, Chrome will show an install button in the omnibox indicating to the user that your PWA can be installed. If the user clicks the install button, it's essentially the same as calling prompt() on the beforeinstallprompt event; it shows the install dialog, making it easy for the user to install your PWA.

See Address Bar Install for Progressive Web Apps on the Desktop for complete details.

More control over the PWA mini-infobar

Example of the Add to Home screen mini-infobar for AirHorner

On mobile, Chrome shows the mini-infobar the first time a user visits your site if it meets the Progressive Web App installability criteria. We heard from you that you want to be able to prevent the mini-infobar from appearing, and provide your own install promotion instead.

Starting in Chrome 76, calling preventDefault() on the beforeinstallprompt event will stop the mini-infobar from appearing.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Be sure to update your UI - to let users know your PWA can be installed. Check out Patterns for Promoting PWA Installation for our recommend best practices for promoting the installation of your Progressive Web Apps.

Faster updates to WebAPKs

When a Progressive Web App is installed on Android, Chrome automatically requests and installs a Web APK. After it's been installed, Chrome periodically checks if the web app manifest has changed, maybe you've updated the icons, colors, or changed the app name, to see if a new WebAPK is required.

Starting in Chrome 76, Chrome will check the manifest more frequently; checking every day, instead of every three days. If any of the key properties have changed, Chrome will request and install a new WebAPK, ensuring the title, icons and other properties are up to date.

See Updating WebAPKs More Frequently for complete details.

Dark mode

Many operating systems now support a dark mode, or dark theme.

The prefers-color-scheme media query, allows you to adjust the look and feel of your site to match the user's preferred mode.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom has a great article Hello darkness, my old friend on web.dev with everything you need to know, plus tips for architecting your style sheets to support both a light, and a dark mode.

And more!

These are just a few of the changes in Chrome 76 for developers, of course, there's plenty more.

`Promise.allSettled()`

Personally, I'm really excited about Promise.allSettled(). It's similar to Promise.all(), except it waits until all of the promises are settled before returning.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Reading blobs is easier

Blobs are easier to read with three new methods: text(), arrayBuffer(), and stream(); this means we don't have to create a wrapper around file reader any more!

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Image support in the async clipboard API

And, we've added support for images to the Asynchronous Clipboard API, making it easy to programmatically copy and paste images.