Back to the catalog

Keeping the screen awake

Device & System APIs

navigator.wakeLock.request("screen")

Baseline newly availablederived from web-features, captured 2026-09-06
  • Chrome84
  • Edge84
  • Firefox126
  • Safari16.4

Features it needs

nosleep.js kept the screen on with a trick: playing a silent, invisible video, because there was no direct way to ask for this. The Wake Lock API asks directly, and releases automatically when the tab is backgrounded rather than needing you to remember to stop the video yourself.

When this applies

Keeping the screen from sleeping while a page is active, such as during a recipe, presentation, or workout.

The native approach

navigator.wakeLock.request("screen")
const lock = await navigator.wakeLock.request("screen");
// later, or automatically when the tab backgrounds
await lock.release();
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • You support Safari below 16.4 on desktop or below 18.4 on iOS. The phone cases this rule is for, a recipe or a workout screen, are exactly the ones iOS was last to allow.
  • You need the lock to survive the tab losing focus. The platform releases it the moment the tab backgrounds, with no way to opt out, so a library that re-acquires on visibilitychange is doing real work.
  • You need this in a non-secure (non-HTTPS) context, where the API isn't available at all.

Packages this covers

Minified and gzipped, captured 2026-09-06.