The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
Most devices by default turn off their screen after a specified amount of time to prolong the life of the hardware. Modern devices do this to save on battery power. Whilst this is a useful feature, some applications need the screen to stay awake to be their most useful.
The Screen Wake Lock API prevents the screen from turning off, dimming or locking. It allows for a simple platform-based solution which up until now could only be achieved via workarounds which were potentially power hungry. Only visible (active) documents can acquire the screen wake lock.
There are plenty of use cases for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an audience, scanning a QR/barcode or applications that use voice or gesture control, rather than tactile input (the default way to keep a screen awake).
You acquire a WakeLockSentinel
object by calling the navigator.wakeLock.request()
Promise
-based method that resolves if the platform allows it. A request may be rejected for a number of reasons, including system settings (such as power save mode or low battery level) or if the document is not active or visible.
The sentinel is attached to the underlying system wake lock. It can be released by the system, again if the battery power is too low or the document is not active or visible. It can also be released manually via the WakeLockSentinel.release()
method. It is good practice to store a reference to the sentinel object to control release later and also to reacquire the lock if need be.
The Screen Wake Lock API should be used to keep the screen on to benefit usability. It's a good idea to show some feedback on the interface to show if wake lock is active and a way for the user to disable it if they wish.
WakeLock
The WakeLock
interface prevents device screens from dimming or locking when an application needs to keep running.
WakeLockSentinel
Provides a handle to the underlying platform wake lock and if referenced can be manually released and reacquired. Get an instance of the object by calling WakeLock.request
.
Navigator.wakelock
Returns a WakeLock
object instance, from which all other functionality can be accessed.
This code checks for wake lock support and updates the UI accordingly.
js
if ("wakeLock" in navigator) { isSupported = true; statusElem.textContent = "Screen Wake Lock API supported!"; } else { wakeButton.disabled = true; statusElem.textContent = "Wake lock is not supported by this browser."; }
The following example demonstrates how to request a WakeLockSentinel
object. The WakeLock.request
method is Promise
-based and so we can create an asynchronous function, which in turn updates the UI to reflect the wake lock is active.
js
// Create a reference for the Wake Lock. let wakeLock = null; // create an async function to request a wake lock try { wakeLock = await navigator.wakeLock.request("screen"); statusElem.textContent = "Wake Lock is active!"; } catch (err) { // The Wake Lock request has failed - usually system related, such as battery. statusElem.textContent = `${err.name}, ${err.message}`; }
The following example shows how to release the previously acquired wake lock.
js
wakeLock.release().then(() => { wakeLock = null; });
This example updates the UI if the wake lock has been released for any reason (such as navigating away from the active window/tab).
js
wakeLock.addEventListener("release", () => { // the wake lock has been released statusElem.textContent = "Wake Lock has been released"; });
The following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
js
document.addEventListener("visibilitychange", async () => { if (wakeLock !== null && document.visibilityState === "visible") { wakeLock = await navigator.wakeLock.request("screen"); } });
You can find the complete code on GitHub here. The demo uses a button to acquire a wake lock and also release it, which in turn updates the UI. The UI also updates if the wake lock is released automatically for any reason. There's a checkbox which when checked, will automatically reacquire the wake lock if the document's visibility state changes and becomes visible again.
Access to the Screen Wake Lock API is controlled by the Permissions Policy directive screen-wake-lock
.
The default allowlist for screen-wake-lock
is self
.
Specification |
---|
Screen Wake Lock API # the-wakelock-interface |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Screen_Wake_Lock_API |
84 | 84 | No | No | 70 | 16.4 | 84 | 84 | No | 60 | 16.4 | 14.0 |
request |
84 | 84 | No | No | 70 | 16.4 | 84 | 84 | No | 60 | 16.4 | 14.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API