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) {
  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) => {
  if (!wakeLock) {
  } else {

⚠️ 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') {

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!

BuymeaCoffee (€3)

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

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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 …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

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.