The Screen Wake Lock API, explained.

navigator.wakeLock.request('screen') returns a promise that resolves to a WakeLockSentinel. While that sentinel is held, the browser signals the OS not to dim or lock the display due to inactivity. It's released automatically the moment the document becomes hidden (you switch tabs, minimize the window) — there's no way to hold a lock on a backgrounded tab, by design.

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      // Fires whenever the lock is released — by you calling
      // release(), the tab hiding, or the browser itself.
      wakeLock = null;
    });
  } catch (err) {
    // Most commonly: the document isn't visible, or the
    // platform declined the request. Fails silently on purpose
    // in most implementations — always check for this.
    console.error(`${err.name}: ${err.message}`);
  }
}

// Re-acquire when the tab becomes visible again, since the
// lock is silently dropped while hidden.
document.addEventListener('visibilitychange', async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    wakeLock = await navigator.wakeLock.request('screen');
  }
});

The spec originally defined two lock types: screen (what's described above) and system (which would have prevented the CPU itself from suspending, letting background work continue even with the display off). The system type wasdropped during development — no browser ships it. So this API can keep a display on; it can't keep a laptop from fully sleeping. See ourAI-agent page for why that distinction matters if you're trying to keep a long background task alive.