New in Chrome 107

Here’s what you need to know:

There are new properties in the Screen Capture API to improve the screen sharing experiences.
You can now precisely identify whether a resource on your page is render blocking or not.
There is a new way to send data to a backend server with the declarative PendingBeacon API in origin trial. And there’s plenty more.
And there’s plenty more.

I’m Adriana Jara. Let’s dive in and
see what’s new for developers in Chrome 107.

New properties in Screen Capture API

In this version the Screen Capture API adds new properties to improve the screen sharing experiences.

The DisplayMediaStreamConstraints added the selfBrowserSurface property. With this hint the application can tell the browser that when calling getDisplayMedia() the current tab should be excluded.

// Exclude the streaming tab
const constraints = {
selfBrowserSurface: 'exclude',
};
const stream = await navigator
.mediaDevices
.getDisplayMedia(constraints);

It helps prevent accidental self capture and avoids the “Hall of Mirrors” effect we’ve seen in video conferences.

DisplayMediaStreamConstraints now also has the surfaceSwitching property.
This property adds an option to programmatically control whether Chrome shows a button for switching tabs while screen sharing. These options will be passed togetDisplayMedia(). The Share this tab instead button allows users to switch to a new tab without going back to the video-conferencing tab or selecting from a long list of tabs, but the behavior is exposed conditionally in case the web application doesn’t handle it.

// Show the switch to this tab button
const constraints = {
surfaceSwitching: 'include',
};
const stream = await navigator
.mediaDevices
.getDisplayMedia(constraints);

Also MediaTrackConstraintSet adds the property displaySurface. When getDisplayMedia() is called the browser offers the user a choice of display surfaces: tabs, windows or monitors. Using the displaySurface constraint, the web app may now hint to the browser if it prefers one of the surface types to be offered more prominently.

For example, it can help prevent oversharing by accident since sharing a single tab can be the default.
Screenshots of the old and new media picker prompts.

Identify render blocking resources

Reliable insights into a page’s performance are critical for developers to build fast user experiences, so far developers have relied on complex heuristics to determine whether a resource is render blocking or not.

Now the Performance API includes the renderBlockingStatus property which provides a direct signal from the browser that identifies the resources that prevent your page from displaying, until they are downloaded.

The code snippet here, shows how to get a list of all your resources and use the new renderBlockingStatus property to list all of those that are render blocking.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Optimizing how you load your resources helps with Core Web Vitals and with providing a better user experience, Check out the MDN documentation to learn more about the Performance API, look for those render blocking resources and optimize away.

PendingBeacon API origin trial

The declarative PendingBeacon API lets the browser control when beacons are sent.

A beacon is a bundle of data sent to a backend server, without expecting a particular response.

Applications often want to send these beacons at the end of a user’s visit, but there’s no good time for that «send» call to be made. This API delegates the sending to the browser itself, so it can support beacons on page unload or on page hide, without the developer having to implement send calls at exactly the right times.

And more!

Of course there’s plenty more.

The expect-ct http header is deprecated.
The rel attribute is now supported on <form> elements.
Last time I mentioned grid-template interpolation, this time it should be included.