Cropped Chrome logo on the left, version number on the right.

New in Chrome 79

Published on

Chrome 79 is rolling out now!

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.

Further reading #

This covers only some of the key highlights. Check the links below for additional changes in Chrome 78.

Subscribe #

Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.

I'm Pete LePage, and as soon as Chrome 80 is released, I'll be right here to tell you -- what's new in Chrome!

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.