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!
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![Page Visibility API]()
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
![Element Position Swapping Using MooTools 1.2]()
We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method.
MooTools 1.2 Implementation
MooTools 1.2 Usage
To call the swap...
![Create a Dynamic Flickr Image Search with the Dojo Toolkit]()
The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...
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