navigator.wakeLock returns a WakeLock object from the Screen Wake Lock API. Learn how to request a screen lock, release it, handle failures, re-acquire after tab switches, five examples, and try-it labs.
Read-only property
WakeLock
Newly available
Secure (HTTPS)
request("screen")
WakeLockSentinel
Phones and laptops often dim or lock the screen to save battery. That is great most of the time — but terrible while you follow a recipe, read a map, present slides, or scan a QR code.
navigator.wakeLock is the entry point to the Screen Wake Lock API. While a screen wake lock is active, the browser tries to prevent dimming, turning the screen off, or showing a screensaver.
MDN: only visible (active) documents can acquire the screen wake lock. If the user switches tabs or minimizes the window, the lock is often released automatically.
wakeLock PropertyThink of navigator.wakeLock as a gate to one main action: request("screen"). That Promise resolves to a WakeLockSentinel you keep around so you can release the lock later.
screen).release().screen-wake-lock.General form of the property:
navigator.wakeLockWakeLock object used to request screen wake locks.// Feature-detect:
if ("wakeLock" in navigator) {
// Supported
}
// Request (MDN-style):
let sentinel = null;
try {
sentinel = await navigator.wakeLock.request("screen");
console.log("Wake Lock is active!");
} catch (err) {
console.log(err.name + ", " + err.message);
}
// Release later:
if (sentinel) {
await sentinel.release();
sentinel = null;
}| Goal | Code |
|---|---|
| Get WakeLock | navigator.wakeLock |
| Feature detect | "wakeLock" in navigator |
| Request screen lock | await navigator.wakeLock.request("screen") |
| Release lock | await sentinel.release() |
| Listen for end | sentinel.addEventListener("release", …) |
| Secure context? | window.isSecureContext |
| Page visible? | document.visibilityState === "visible" |
Four facts to remember about navigator.wakeLock.
WakeLockScreen lock API
BaselineNewly available
HTTPSSecure required
"screen"Keep display on
| Default device behavior | With Screen Wake Lock | |
|---|---|---|
| After idle time | Screen dims / locks | Browser tries to keep screen on |
| Battery | Saved by timeout | Uses more power — use only when needed |
| Tab hidden | N/A | Lock usually released; re-request when visible |
| User control | System settings | Your UI should offer an Off control |
Examples follow MDN Screen Wake Lock patterns. Prefer Try It Yourself on HTTPS with the tab visible — requests fail when the document is hidden or the battery policy blocks them.
Detect the API and request a screen wake lock.
MDN-style support check before enabling a Keep Awake button.
const lines = [
"wakeLock: " + ("wakeLock" in navigator ? "available" : "missing"),
"isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));If missing, disable the Keep Awake control and explain that the browser does not support the API.
MDN async request with try...catch.
async function requestWakeLock() {
if (!("wakeLock" in navigator)) {
return "wakeLock not supported";
}
try {
const sentinel = await navigator.wakeLock.request("screen");
return "Wake Lock is active! type=" + sentinel.type;
} catch (err) {
return err.name + ", " + err.message;
}
}
requestWakeLock().then((msg) => console.log(msg));Store the sentinel in a variable so you can release it later and listen for automatic release.
Release the lock, listen for release, and re-request when the tab becomes visible again.
Let the user turn Keep Awake off.
async function demoRelease() {
if (!("wakeLock" in navigator)) {
return "wakeLock not supported";
}
let sentinel;
try {
sentinel = await navigator.wakeLock.request("screen");
} catch (err) {
return "request failed: " + err.name;
}
await sentinel.release();
return "Wake Lock released. released=" + sentinel.released;
}
demoRelease().then((msg) => console.log(msg));After release, the sentinel cannot be reused — request a new one if you need the lock again.
releaseUpdate UI when the system or your code ends the lock.
async function demoReleaseEvent() {
if (!("wakeLock" in navigator)) {
return "wakeLock not supported";
}
try {
const sentinel = await navigator.wakeLock.request("screen");
sentinel.addEventListener("release", () => {
console.log("Wake Lock has been released");
});
await sentinel.release();
return "Requested, then released — check the release log above.";
} catch (err) {
return err.name + ", " + err.message;
}
}
demoReleaseEvent().then((msg) => console.log(msg));The release event also fires when the user hides the tab — keep your status text in sync.
Common pattern: when the page becomes visible again, request a new lock if the user still wants Keep Awake.
let sentinel = null;
let wantLock = true; // user toggled Keep Awake on
async function ensureWakeLock() {
if (!wantLock || !("wakeLock" in navigator)) return;
if (document.visibilityState !== "visible") return;
try {
sentinel = await navigator.wakeLock.request("screen");
console.log("Wake Lock re-acquired");
} catch (err) {
console.log("Could not acquire: " + err.name);
}
}
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
ensureWakeLock();
} else {
console.log("Page hidden — lock may be released by the system");
}
});
console.log("visibilityState: " + document.visibilityState);
ensureWakeLock();Wake locks do not survive tab switches forever. Re-request when the document is visible again if the feature should stay on.
navigator.wakeLock WorksFeature-detect and ensure the document is visible.
Browser asks the platform for a screen wake lock.
Keep a reference; listen for release; update UI.
Call release(), or request again when the tab returns.
WakeLock; main method is request("screen") → WakeLockSentinel.try...catch.navigator.wakeLock is Baseline Newly available for the Screen Wake Lock API. It requires a secure context. Always feature-detect, request only while the page is visible, and handle refusal (battery / policy) gracefully.
WakeLock entry point — request a screen lock, hold a WakeLockSentinel, release when done.
Bottom line: Detect wakeLock, call request("screen") from a visible tab on HTTPS, listen for release, and re-acquire on visibilitychange when Keep Awake stays on.
navigator.wakeLock is the Baseline entry point for keeping the screen awake when usability needs it. Request a screen lock on a visible HTTPS page, hold the sentinel, release when done, and re-acquire after visibility changes.
Continue with webdriver, userActivation, or the JavaScript hub.
"wakeLock" in navigatorrequest() in try...catchvisibilitychange when neededrelease()navigator.wakeLockwakeLockBaseline screen lock — request, hold sentinel, release, re-acquire when visible.
WakeLock
Valuerequest("screen")
APIsecure HTTPS
Requireddocument must show
RuleWakeLockSentinel
ReleaseA screen wake lock is different from preventing a laptop from sleeping entirely. It targets the display (dim / lock / screensaver) for visible pages — not a guarantee that background CPU work or downloads will keep running forever.
Baseline boolean — detect WebDriver automation for test code paths.
8 people found this page helpful