The Screen Wake Lock API is a web API that allows web applications to prevent the device's screen from dimming or turning off. It's particularly useful for applications like recipe apps, presentation tools, video players, navigation apps, and reading platforms where users need the screen to stay active without touching it constantly. The API uses navigator.wakeLock.request('screen') to acquire a lock and returns a WakeLockSentinel object that can be released when no longer needed.

As of 2024, the Screen Wake Lock API is supported in Chrome 84+, Edge 84+, Opera 70+, and Safari 16.4+ (including iOS Safari). Firefox does not yet support this API. The API requires a secure context (HTTPS or localhost) to function. On mobile devices, support is generally good across Chromium-based browsers and recent Safari versions.

Wake locks can be released automatically for several reasons: (1) The page becomes hidden or minimized (switching tabs/apps) — the browser may release the lock to save power. (2) The device battery is critically low — the OS may override the wake lock. (3) The browser or OS enforces a timeout policy. (4) The user locks their device manually. Our Auto Re-lock feature automatically attempts to reacquire the lock when the page becomes visible again.

Yes. The Wake Lock API is only available in secure contexts, meaning your site must be served over HTTPS or run on localhost during development. This is a security requirement enforced by modern browsers to protect user privacy and prevent abuse. If you try to use the API on an HTTP page, navigator.wakeLock will be undefined.

Yes, it will. The screen is one of the biggest power consumers on any device. Keeping the screen constantly on will drain the battery significantly faster than allowing it to sleep. Use the Wake Lock API responsibly — only activate it when truly necessary (e.g., during active reading, navigation, or presentations) and release it promptly when the user no longer needs it. Our tool helps you understand this behavior by showing exactly how long the lock has been active.

Here's a basic implementation pattern:

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake lock released');
    });
  } catch (err) {
    console.error('Failed:', err);
  }
}

// Re-acquire on visibility change
document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState === 'visible' && !wakeLock) {
    await requestWakeLock();
  }
});

Common scenarios include: Cooking/recipe apps (users don't want to touch the screen with messy hands), Presentation tools (slides shouldn't dim during long discussions), Navigation apps (drivers need continuous screen visibility), Fitness trackers (during workouts), E-readers (slow readers), Video conferencing, and live monitoring dashboards.

Yes. The Wake Lock API requires a user gesture (like a click or tap) to activate. You cannot automatically request a wake lock on page load — the user must interact with the page first. This prevents websites from keeping screens on without the user's knowledge or consent. However, re-acquiring a lock on visibility change (after the user returns to the page) is generally permitted.