JavaScript Wake Lock API

An enjoyable web apps rely on engineers implementing the APIs that cover all of the small things. Those small things sometimes improve performance, usability, accessibility, and the app’s relationship with its host system. The Wake Lock API is the latter — an API that allows developers to instruct the host machine to not dim the […]

The post JavaScript Wake Lock API appeared first on David Walsh Blog.

An enjoyable web apps rely on engineers implementing the APIs that cover all of the small things. Those small things sometimes improve performance, usability, accessibility, and the app’s relationship with its host system. The Wake Lock API is the latter — an API that allows developers to instruct the host machine to not dim the screen or sleep, especially useful when users view videos.

To prevent the screen from dimming or sleeping, request permission to the screen:

let lock

try {
  lock = await navigator.wakeLock.request('screen');
} catch (err) {
  // Error or rejection
  console.log('Wake Lock error: ', err);
}

If the request is successful, the host machine doesn’t sleep until released:

await lock.release()

I first saw this API implemented and utilized on mobile devices, and I’m happy to start seeing it utilized on desktop. There are a few big name streaming services that I’ve noticed could desperately use the Wake Lock API — system sleep during videos ruins the experience!

The post JavaScript Wake Lock API appeared first on David Walsh Blog.


Print Share Comment Cite Upload Translate
APA
David Walsh | Sciencx (2024-03-29T10:00:04+00:00) » JavaScript Wake Lock API. Retrieved from https://www.scien.cx/2021/01/25/javascript-wake-lock-api/.
MLA
" » JavaScript Wake Lock API." David Walsh | Sciencx - Monday January 25, 2021, https://www.scien.cx/2021/01/25/javascript-wake-lock-api/
HARVARD
David Walsh | Sciencx Monday January 25, 2021 » JavaScript Wake Lock API., viewed 2024-03-29T10:00:04+00:00,<https://www.scien.cx/2021/01/25/javascript-wake-lock-api/>
VANCOUVER
David Walsh | Sciencx - » JavaScript Wake Lock API. [Internet]. [Accessed 2024-03-29T10:00:04+00:00]. Available from: https://www.scien.cx/2021/01/25/javascript-wake-lock-api/
CHICAGO
" » JavaScript Wake Lock API." David Walsh | Sciencx - Accessed 2024-03-29T10:00:04+00:00. https://www.scien.cx/2021/01/25/javascript-wake-lock-api/
IEEE
" » JavaScript Wake Lock API." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2021/01/25/javascript-wake-lock-api/. [Accessed: 2024-03-29T10:00:04+00:00]
rf:citation
» JavaScript Wake Lock API | David Walsh | Sciencx | https://www.scien.cx/2021/01/25/javascript-wake-lock-api/ | 2024-03-29T10:00:04+00:00
https://github.com/addpipe/simple-recorderjs-demo