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.

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();
  }
});

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) →

~