How to Keep Screens Awake on the Web - Practical Screen Wake Lock API

Auto-sleep is a major annoyance during presentations, recipe reading, and dashboard monitoring. Rather than forcing users to change system-level sleep settings, modern browsers provide a native, zero-install solution: the Screen Wake Lock API.

Requesting the Lock

Acquiring a lock takes a single asynchronous call:

let wakeLock = null;

async function lockScreen() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => console.log('Wake Lock released'));
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
  }
}

HTTPS & Permissions Policy

Because keeping screens on drains battery and generates heat, browsers restrict navigator.wakeLock strictly to Secure Contexts (HTTPS) (with localhost permitted for local development). When embedding the feature inside an iframe, explicitly declare permission:

<iframe src="https://example.com" allow="screen-wake-lock"></iframe>

Auto-Reacquire via visibilitychange

Per specification, browsers automatically release active wake locks whenever a user switches tabs, minimizes windows, or locks their device. Without auto-recovery, returning to the page silently leaves the screen unprotected.

Always track user intent separately from the lock state, and reacquire upon return:

document.addEventListener('visibilitychange', async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await lockScreen();
  }
});

Supported natively in Chrome 84+, Edge 84+, and Safari 17+, this approach delivers a resilient, battery-safe display lock entirely in front-end JavaScript.

Live demo and interactive implementation: webtools.rustfisher.com