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!
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![5 HTML5 APIs You Didn’t Know Existed]()
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...
![Unicode CSS Classes]()
CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores. One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.
![PHP Woot Checker – Tech, Wine, and Shirt Woot]()
If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot:
Every day, Woot sells one product.
Once the item is sold out, no more items are available for purchase.
You don't know how many...
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