Screen wake lock | Frontend Practical Guide

Overview

The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`WakeLock`	84	84	126	16.4	84	18.4
`wakeLock` The wakeLock read-only property of the Navigator interface returns a WakeLock interface that allows a document to acquire a screen wake lock. While a screen wake lock is active, the user agent will try to prevent the device from dimming the screen, turning it off completely, or showing a screensaver.	84	84	126	16.4	84	18.4
`permission_screen-wake-lock` `screen-wake-lock` permission	84	84	126	16.4	84	16.4
`request` The request() method of the WakeLock interface returns a Promise that fulfills with a WakeLockSentinel object if the system screen wake lock is granted.	84	84	126	16.4	84	18.4
`WakeLockSentinel` The WakeLockSentinel interface of the Screen Wake Lock API can be used to monitor the status of the platform screen wake lock, and manually release the lock when needed.	84	84	126	16.4	84	18.4
`release` The release() method of the WakeLockSentinel interface releases the WakeLockSentinel, returning a Promise that is resolved once the sentinel has been successfully released.	84	84	126	16.4	84	18.4
`release_event` The release event of the WakeLockSentinel interface is fired when the sentinel object's handle has been released.	84	84	126	16.4	84	18.4
`released` The released read-only property of the WakeLockSentinel interface returns a boolean that indicates whether a WakeLockSentinel has been released.	87	87	126	16.4	87	18.4
`type` The type read-only property of the WakeLockSentinel interface returns a string representation of the currently acquired WakeLockSentinel type.	84	84	126	16.4	84	18.4
Other
`html.elements.iframe.allow.screen-wake-lock`	84	84	126	16.4	84	16.4
`http.headers.Permissions-Policy.screen-wake-lock` Experimental The HTTP Permissions-Policy header screen-wake-lock directive controls whether the current document is allowed to use Screen Wake Lock API to indicate that the device should not dim or turn off the screen.	88	88			88

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

let wakeLock = null;
async function requestWakeLock() {
  wakeLock = await navigator.wakeLock.request('screen');
  console.log('Wake Lock enabled');
}
async function releaseWakeLock() {
  await wakeLock?.release();
  console.log('Wake Lock released');
}

Use cases

Use Screen wake lock
Use Screen wake lock when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Screen wake lock to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Screen wake lock in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Use cases

Use Screen wake lock

Handle edge cases

Cautions

Accessibility

Related links