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 always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.