New in Chrome 84

Chrome 84 has been released, which contains some nice additions. Pete LePage walks us through:

Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from origin trial. There are new origin trials for Idle detection and SIMD. And there’s a whole bunch more. Let’s dive in and see what’s new for developers in Chrome 84!

I’ve written about the Wake Lock API before, which has been part of Chrome’s Origin Trials since Chrome 79.

New in Chrome 84 →

Have a web page prevent your screen/computer from dimming/sleeping with the Wake Lock API

On some sites you don’t want the screen to dim (and eventually turn off) when left idle. Think of a run-tracking app, a puzzle game that takes device motion input, a recipe site for example: you’d want to keep the screen awake even if there is no touch input. This is where the Wake Lock API comes into play:

The Wake Lock API provides a way to prevent the device from dimming and locking the screen or going to sleep. This capability enables new experiences that, until now, required a native app.

👨‍🔬 The Wake Lock API is experimental. It is part of a Chrome Origin Trial from Chrome 79 to Chrome 81. When the origin trial ends, the feature will be evaluated. To play with the Wake Lock API today, enable the #experimental-web-platform-features flag in chrome://flags.

To use it, you request a wake lock (using navigator.wakeLock.request()), and then later release it.

// 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}`);
  }
};

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

// Toggle wake lock by press of a button
document.querySelector('button').addEventListener('click', (e) => {
  e.preventDefault();
  if (!wakeLock) {
    requestWakeLock();
  } else {
    releaseWakeLock();
  }
});

⚠️ Do note that the implementation that shipped with Chrome 79 uses a slightly different syntax. This post targets the syntax used as of Chrome 80, so you’ll need to use Chrome Canary to play with it.

A Wake lock can be requested for the screen and for the system.

Wake locks can also be released automatically by the system:

Wake locks are sensitive to page visibility and full-screen mode. This means that the wake lock will automatically be released when you enter full-screen mode, minimize a tab or window, or switch away from a tab or window where a wake lock is active.

In those case you might want to re-request a wake lock:

const handleVisibilityChange = () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);
document.addEventListener('fullscreenchange', handleVisibilityChange);

To feature detect the wakeLock API, use this snippet:

const wakeLockSupported = ('wakeLock' in navigator && 'request' in navigator.wakeLock);

Stay awake with the Wake Lock API →
Wake Lock Demo →
The Wake Lock API Spec (Editor’s Draft) →

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.