New in Chrome 89

Pete LePage

Chrome 89 is starting to roll out to stable now.

Here's what you need to know:

WebHID, WebNFC, and Web Serial have graduated from their origin trials and are now available in stable.
We're closing a loophole a few developers used to skirt the PWA installability checks.
Web Share, and Web Share Target arrive on the desktop.
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 89!

WebHID, WebNFC, and Web Serial

I'm really excited about WebHID, WebNFC, and Web Serial. They open up new scenarios for users that were never possible before, interacting with real world hardware.

They allow makers to connect to fun, quirky hardware, video conferencing apps to use the dedicated telephony buttons on specialized speakers. Or any number of other use cases.

Using Web Serial, and about 60 lines of code, @AndreBan created a page that can interact with the MicroPython REPL on a Raspberry Pi Pico. Web Serial is also used by Espruino in their web based IDE.

At CDS 2019, Francois wrote a fun, memory-style game using Web NFC. You had to tap the phone to the right card, in the right order.

StreamDeck with Daft Punk Drum Pad

And my favorite, @bramus used WebHID to connect to a StreamDeck, building a Daft Punk drum pad. If you don't have a StreamDeck, check out his demo video on YouTube, and check out the code on GitHub.

Whether it's your site that interacts with your hardware, or your hardware that can interact with lots of sites, users win because they don't need to install special drivers, or software.

You can learn more about some of the devices you can connect to at web.dev/devices, or check out the getting started guides for WebHID, WebNFC, and Web Serial.

PWA installability criteria changes

Offline support has been a key part of the Progressive Web App criteria for installability since the beginning. As with other installed app, users expect it to work reliably. It should be fast, and, they should never see the offline dino!

Later this year, we plan to close a loophole that allowed a few sites to pass the installability criteria, without an offline experience. If your PWA already has an offline experience, you're all set. There's no action required, but, if you don't, it's time to add one!

Starting in Chrome 89, if your PWA doesn't provide a valid response when offline, you'll see a warning in DevTools under the Issues tab, and Lighthouse will indicate there's an issue. And, enforcement will start in Chrome 93, later this year.

DevTools showing warning message in Console. — Warning message in the Chrome DevTools Console.

DevTools showing warning message in Application tab. — Warning message in Application tab > Manifest > Installability.

You can decide what kind of offline experience you want to provide. Ideally, you should provide as much of your experience as possible. But, at a minimum, it can be as simple as an offline fallback page.

You can find more details about the change, and why we're making it in Improving Progressive Web App offline support detection.

If you're not sure where to get started, check out Workbox. It has a set of libraries that can power a production-ready service worker for your PWA. Or, for a simple offline fallback page, the article Create an offline fallback page has all the code you need, and you can copy and paste directly in to your site.

Web Share and Web Share Target for Desktop

If your site allows users to create, edit, or interact with files, you should be using the Web Share and Web Share Target APIs. These APIs have been available on mobile for some time but are now supported on ChromeOS and Windows.

Web Share makes it possible for users to send files or data to other installed apps on their device, for example, sharing a photo from Google Photos to Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

To register as a target so other apps can share files or data with you, you'll want to use the Web Share Target API.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Check Integrate with the OS sharing UI with the Web Share API and Receiving shared data with the Web Share Target API for getting started guides.

And more

And of course there's plenty more.

Chrome now allows top level await within JavaScript modules.

To reduce confusion for users, we've updated the icon shown in the omnibox for installable PWAs.

And, if you've used a Trusted Web Activity to make your PWA available in the Play Store for ChromeOS, you can sign up for the Digital Goods API origin trial.

Credits

The photo of the Raspberry Pis and Arduino are by by Harrison Broadbent on Unsplash