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 DisplayMediaStreamOptions 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 options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

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

DisplayMediaStreamOptions 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 options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

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.

# 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.

Sign up for the origin trial, give the API a try and please send feedback our way to improve the use cases.

# 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.

# Further reading

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

• What's new in Chrome DevTools (107)
• Chrome 107 deprecations and removals
• ChromeStatus.com updates for Chrome 107
• Chromium source repository change list
• Chrome release calendar

# Subscribe

To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.

I’m Adriana Jara, and as soon as Chrome 108 is released, I'll be right here to tell you what's new in Chrome!