JavaScript Wake Lock API

By  on  

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!

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    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...

Incredible Demos

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Discussion

  1. 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.

  2. 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

  3. joe
    Uncaught SyntaxError: await is only valid in async functions and async generators

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!