New in Chrome 79

Pete LePage

Chrome 79 is rolling out now!

Installed Progressive Web Apps on Android now support maskable icons.
You can now create immersive experiences with the WebXR Device API.
The Wake Lock API is available as an origin trial.
The rendersubtree attribute is available as an origin trial.
Videos from the Chrome DevSummit are now online.
And plenty more.

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

Maskable Icons

If you're running Android O or later, and you've installed a Progressive Web App, you've probably noticed the annoying white circle around the icon.

Thankfully, Chrome 79 now supports maskable icons for installed Progressive Web Apps.You'll need to design your icon to fit within the safe zone - essentially a circle with a diameter that's 80% of the canvas.

Then, in the web app manifest, you'll need to add a new purpose property to the icon, and set its value to maskable.

{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes has a great post on CSS Tricks - Maskable Icons: Android Adaptive Icons for Your PWA with all of the details, and has a great tool you can use for testing your icons to make sure they'll fit.

Web XR

You can now create immersive experiences for smartphones and head-mounted displays with the WebXR Device API.

WebXR enables a whole spectrum of immersive experiences. From using augmented reality to see what a new couch might look like in your home before you buy it, to virtual reality games and 360 degree movies, and more.

To get started with the new API, read Virtual Reality Comes to the Web.

New origin trials

Origin trials provide an opportunity for us to validate experimental features and APIs, and make it possible for you to provide feedback on their usability and effectiveness in broader deployment.

Experimental features are typically only available behind a flag, but when we offer an Origin Trial for a feature, you can register for that origin trial to enable the feature for all users on your origin.

Opting into an origin trial allows you to build demos and prototypes that your beta testing users can try for the duration of the trial without requiring them to flip any special flags in Chrome.

There's more info on origin trials in the Origin Trials Guide for Web Developers. You can see a list of active origin trials, and sign up for them on the Chrome Origin Trials page.

Wake Lock

One of my biggest pet peeves about Google Slides is that if you leave the deck open on a single slide for too long, the screensaver kicks in. Before you can continue, you need to unlock your computer. Ugh.

But, with the new Wake Lock API, a page can request a lock, and prevent the screen from dimming or the screensaver from kicking in. It's perfect for Slides, but it's also helpful for things like recipe sites - where you might want to keep the screen on while you follow the instructions.

To request a wake lock, you need to call navigator.wakeLock.request(), and save the WakeLockSentinel object that it returns.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

The lock is maintained until the user navigates away from the page, or you call release on the WakeLockSentinel object you saved earlier.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

More details are at web.dev/wakelock.

`rendersubtree` attribute

There are times when you don't want part of the DOM to render immediately. For example scrollers with a large amount of content, or tabbed UIs where only some of the content is visible at any given time.

The new rendersubtree attribute tells the browser it can skip rendering that subtree. This allows the browser to spend more time processing the rest of the page, increasing performance.

When rendersubtree is set to invisible, the element's content is not drawn or hit-tested, allowing for rendering optimizations.

Changing the rendersubtree to activatable, makes the content visible by removing the invisible attribute, and rendering the content.

Chrome Dev Summit 2019

If you missed Chrome Dev Summit, all of the talks are on our YouTube channel.

Jake also has a great Twitter thread with all the fun stuff that went on between the talks, including the newest member of our team, Surjiko.