Skip to content

For the curious & developers

The Screen Wake Lock API, explained

One small browser API powers this whole site. Here's what it actually does, the rules it lives by, and the exact pattern our tool uses — in code you can copy.

What it is

The Screen Wake Lock API is a W3C standard that lets a web page ask the operating system to keep the display on. A page requests a lock, the browser mediates, and the OS inhibits its display-sleep timer until the lock is released. Before it existed, sites resorted to hacks — like looping a hidden muted video — purely to trick the browser into keeping the screen alive.

There are two rules that define everything about it: the page must be served over HTTPS (a secure context), and the page must be visible. Hide the tab and the OS releases the lock automatically.

The smallest useful implementation

let lock = null;

async function keepAwake() {
  try {
    lock = await navigator.wakeLock.request("screen");
    lock.addEventListener("release", () => (lock = null));
  } catch {
    // Refused — typically a hidden tab or battery saver.
  }
}

// The API releases locks on hidden tabs, so reacquire on return:
document.addEventListener("visibilitychange", () => {
  if (lock === null && document.visibilityState === "visible") keepAwake();
});

// To allow sleep again:
// await lock.release(); lock = null;

Feature-detect with "wakeLock" in navigator. Our tool adds exactly one layer on top of this: a clock-based countdown that calls lock.release() when a timer expires.

The eight rules that matter

  1. HTTPS only. The API doesn't exist on insecure pages.
  2. Visible pages only. Requesting from a hidden tab throws; a held lock releases when the tab hides.
  3. It's a hint, not a right. The OS may refuse — low battery and battery-saver modes are the usual reasons.
  4. One type exists: "screen". A "system" wake lock (keep the whole machine running while the screen sleeps) was considered and dropped from the spec.
  5. Manual sleep always wins. Locking the device, closing the lid or choosing Sleep releases everything.
  6. Embeds need permission. Inside an iframe, the Permissions-Policy: screen-wake-lock directive controls access.
  7. No permission prompt. Unlike camera or location, wake lock never asks the user — visibility is the consent model.
  8. Locks don't stack. Multiple requests from one page each return a sentinel; the screen sleeps when all are released.

Browser support

Chrome and Edge since 84 (2020), Safari since 16.4 (2023), Firefox since 126 (2024) — on desktop and, for the same versions, mobile. Full desktop/mobile details live in the compatibility table and our per-browser guides: Chrome, Edge, Firefox, Safari.

Authoritative references

For the full normative detail, see the W3C Screen Wake Lock specification and MDN's API documentation.

Just want the result?

Everything above is already wrapped in a friendly interface with timers, fullscreen and recovery messages.