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 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![Elegant Overflow with CSS Ellipsis]()
Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
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