Stop The Screen Going To Sleep With JavaScript

We've all been there. Cooking a complex recipe where each step takes a good couple of minutes. Our hands covered in some type of sauce made of who knows how many ingredients. We go to check the next step on our phone only to see that it's gone to sleep due to inactivity. We know that even if we quickly wash our hands, there is inevitably going to be some level of greasy trail left on our phone screen as we are forced to unlock it...

Hands Covered in Dough by Anastasia Shuraeva via https://www.pexels.com/@anastasia-shuraeva/
Hands Covered in Dough by Anastasia Shuraeva via https://www.pexels.com/@anastasia-shuraeva/

However, thanks to a web API released in chrome 85, this doesn't need to be an issue any more. The Screen Wake Lock API allows us to stop the device screen from going to sleep without hacky work arounds that are likely to drain the battery of the device (Such as NoSleep.js). It is unfortunately unsupported in Firefox and Safari but I don't imagine that Firefox will be too far behind on this implementation.

Wake Lock only works on active tabs/windows, which I'm sure you'll all agree is a good idea. This prevents background tabs from keeping your device awake but it can also be released manually via code at any point (eg. when your blog post has finished being read).

To implement wake lock we first need to check if the feature exists in the current browser. We can do this with the following simple function.

To actually lock the wake state, we need to call request on our the wakeLock object in the navigator. We can also wrap a couple of console.log statements around it to ensure that we can see alerts when the state changes.

We've put the code in a try catch loop as navigator.wakeLock could potentially exist in some other state than we're expecting and that would cause errors.

At this point we have a window which can prevent the screen from sleeping. At some point we're likely going to want to release the lock and to do that, we call release on our wakelock variable.

With those two functions set up we can keep our screen awake for as long as we need. If we only need to lock the wake state for a short period, we can even use these with a setTimeout like so.

And just like that, you've finished implementing wakeLock.

I am a little concerned about the lack of security on this API given it's potential to keep the machine from sleeping, however due to the limitations of running only on active tabs I suppose its scope for abuse is limited.

I love how simple this API is. It doesn't have any features that you don't need and works with very little setup. Hopefully, you'll have noticed that while reading this blog post, your browser hasn't let your computer go to sleep. That being said, I have set it up to release the sleep lock state once you scroll into the comment section.

Also, while I have included console.logs on this blog post. They won't exist on any of the others.

Webmentions

What's this?

This site uses Webmentions to handle likes, comments and other interactions. To leave a comment, you can reply on GitHub, Reddit, or Bluesky. While the site will count likes from any source, only Bluesky likes are currently displayed in the facepile.

heh- back when i was working overnights at a callcenter, we had a 10 minute screen lock out (that we couldn't change), but we could often go 30 minutes without a call, i wrote a simple java program to fake a benign keypress every 9 minutes. ended up sharing it with several of my coworkers.

Posted via reddit.com

(in Chrome) I get the feeling this could end up being a feature that requires the user to give affirmative consent. I don't want every single site I navigate to to, by default, prevent screen sleep.

Posted via reddit.com

If you are in a situation (read it working sleeping from home) that you need to keep yourself online on that restricted work computer where you cannot install custom software, just open a website and click somewhere empty (so not a text box) and put something heavy on space key. it will constantly press space and your computer will remain on.

Posted via reddit.com

I am presuming this allows multiple locks to be generated? Since the unlock is on the request object? So may be bad if someone calls wakeLoclState() twice. Unless it returns the same object every time request is called? I will test next time I am on my work machine

Posted via github.com

I am presuming this allows multiple locks to be generated? Since the unlock is on the request object? So may be bad if someone calls wakeLoclState() twice. Unless it returns the same object every time request is called? I will test next time I am on my work machine

navigator.wakeLock.request() only creates a new wake lock request, and can fail for a number of reasons (eg. the tab is not active). further requests will override the old request. While for efficiency sake, you don't want to make a bunch of calls to lockWakeState. It will only ever create a single wake lock.

Posted via github.com

Thanks for posting this! Your example is well thought out 🙂 Excited to see support in Safari and Firefox in the future; I've never seen the caniuse.com widget embedded in a blog before, was nice to have it inline for reference.

Posted via github.com

Thanks for posting this! Your example is well thought out 🙂 Excited to see support in Safari and Firefox in the future; I've never seen the caniuse.com widget embedded in a blog before, was nice to have it inline for reference.

The can I use embed isn't actually official. You can find it here. Sorry it took me so long to reply, I honestly thought I already had...

I'm so glad you enjoyed the article.

Posted via github.com

Oh totally. Some of my most successful blog posts have been explorations of new stuff. This one comes to mind (It didn't get many likes but did get shared pretty widely) mikevdv.dev/blog/2022-06-2…

Posted via twitter.com

Thanks, I am afraid of effects the visitor won't expect. I wouldn't turn that of unless I have affirmative action or I am making an internal webapp for a company. This also highlights how Chromium adding a feature=72% I know it's Open source but I am still uncomfortable about it

Posted via twitter.com