New in Chrome 72

Pete LePage

In Chrome 72, we've added support for:

Creating public class fields in JavaScript is now much cleaner.
You can see if a page has been activated with the new User Activation API
Localizing lists becomes way easier with the Intl.format() API.

And there's plenty more!

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 72!

Change log

This covers only some of the key highlights, check the links below for additional changes in Chrome 72.

Public class fields

My first language was Java, and learning JavaScript threw me for a bit of a loop. How did I create a class? Or inheritance? What about public and private properties and methods? Many of the recent updates to JavaScript that make object oriented programming much easier.

I can now create classes, that work like I expect them to, complete with constructors, getters and setters, static methods and public properties.

Thanks to V8 7.2, which ships with Chrome 72, you can now declare public class fields directly in the class definition, eliminating the need to do it in the constructor.

class Counter {
  _value = 0;
  get value() {
    return this._value;
  }
  increment() {
    this._value++;
  }
}

const counter = new Counter();
console.log(counter.value);
// → 0
counter.increment();
console.log(counter.value);
// → 1

Support for private class fields is in the works!

More details are in Mathias's article on class fields for more details.

User Activation API

Remember when sites could automatically play sound as soon as the page loaded? You scramble to hit the mute key, or figure out which tab it was, and close it. That's why some APIs require activation via a user gesture before they'll work. Unfortunately, browsers handle activation in different ways.

Chrome 72 introduces User Activation v2, which simplifies user activation for all gated APIs. It's based on a new specification that aims to standardize how activation works across all browsers.

There's a new userActivation property on both navigator and MessageEvent, that has two properties: hasBeenActive and isActive:

hasBeenActive indicates if the associated window has ever seen a user activation in its lifecycle.
isActive indicates if the associated window currently has a user activation in its lifecycle.

More details are in Making user activation consistent across APIs

Localizing lists of things with `Intl.format`

I love the Intl APIs, they're super helpful for localizing content into other languages! In Chrome 72, there's a new .format() method that makes rendering lists easier. Like other Intl APIs, it shifts the burden to the JavaScript engine, without sacrificing performance.

Initialize it with the locale you want, then call format, and it'll use the correct words and syntax. It can do conjunctions - which adds the localized equivalent of and (and look at those beautiful oxford commas). It can do disjunctions - adding the local equivalent of or. And by providing some additional options, you can do even more.

const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'

Check out the Intl.ListFormat API post for more details!

And more!

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

Chrome 72 changes the behavior of Cache.addAll() to better match the spec. Previously, if there were duplicate entries in the same call, later requests would simply overwrite the first. To match the spec, if there are duplicate entries, it will reject with an InvalidStateError.
Requests for favicons are now handled by the service worker, as long as the request URL is on the same origin as the service worker.

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 73 is released, I'll be right here to tell you -- what's new in Chrome!