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 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!
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![Flext: MooTools Auto-Growing Textrea Plugin]()
A while back David Walsh published a list of
7 MooTools Plugins You Should Use on Every Website
which included 'AutoGrow' a text area expander plugin. 'AutoGrow' is very similar in results to the class I wrote for Education.com, Flext. I decided to release this...
![MooTools ASCII Art]()
I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous; ASCII...
Really nice to see that this is becoming somewhat supported. I remember trying to use NoSleep.js (https://github.com/richtr/NoSleep.js) to hack this functionality in to a personal project.
Great article thanks !
I use the Wake Lock API too for a personal recipe app this is really usefull when cooking
I’ve open sourced a react module https://github.com/jorisre/react-screen-wake-lock