Bug 205104 - Feature Request: Implement the Wake Lock API
Summary: Feature Request: Implement the Wake Lock API
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2019-12-10 23:33 PST by Thomas Steiner
Modified: 2022-04-17 13:21 PDT (History)
10 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Thomas Steiner 2019-12-10 23:33:56 PST
Many websites like recipe sites or tutorial sites have a legit desire to prevent the screen of a device from turning off. Since the user may be busy with performing a task (following the recipe or tutorial steps), in many cases they may not be able or willing to touch the screen to keep it awake, for example, because their hands are dirty with dough or glue. The current workaround for page authors to obtain the desired behavior is to play an invisible video and to loop it infinitely. The Wake Lock API instead provides them with a proper way to programmatically keep the screen awake via a screen wake lock. When the user navigates away from either the tab or multitasks away from their browser completely, the wake lock would be released automatically.

Spec: https://w3c.github.io/wake-lock/

Article: https://web.dev/wakelock/

Demo: https://wake-lock-demo.glitch.me/

Sample code:

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);

// Request a wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock = null;
}, 5000);
Comment 1 Henry 2020-07-19 06:22:26 PDT
Our web app displays long running photo slideshows and we would love this feature. Like many other sites, we are currently forced to use the 'nosleep' library (https://github.com/richtr/NoSleep.js/) to keep the display awake, but a native solution would be preferable, and presumably much better for battery life.

We also use the 'nosleep' library when users are performing long running file uploads (e.g. large selections of photos), because whenever the screen goes to sleep the upload dies. (I assume this problem would be better solved by allowing background uploads of some sort, but at the moment 'nosleep' seems to be the only option).
Comment 2 Thomas Steiner 2020-07-20 00:04:05 PDT
(The data upload feature would ideally be solved with Background Fetch: https://wicg.github.io/background-fetch/.)
Comment 3 Radar WebKit Bug Importer 2020-11-19 23:52:22 PST
Comment 4 matías lópez 2021-01-12 07:47:19 PST
Our platform uses a queue where customers need to wait for to someone answer the call, like a call center. There we need to prevent the screen of a device from turning off or browser go to disconnect from the websocket.

Use a hidden video with a loop is a hack, but is not respectful with battery.
Comment 5 Kieren 2021-03-01 19:37:38 PST
Our site uses this for big downloads - The display must be kept on or the requests will fail
Comment 6 yordan kanchelov 2022-04-17 13:21:05 PDT
Useful for creating games which don't require often user interaction