Prevent Mobile Browser From Sleeping

By  on  

Web developers still have a difficult job when it comes to mobile; the web will never provide as many APIs or as much control as native mobile platforms but our users expect the same excellent experience.  Creating HTML5 games and media-heavy apps for the web can be really difficult, as you really have to pay attention to performance the the rest of the little things that native platforms provide.

One of those small features includes preventing the device from sleeping when the user hasn't been active.  Imagine your user playing a game that doesn't require much interaction, experiencing a VR demo, or even just a blog post or slideshow, and the screen suddenly goes black -- that's an annoyance that your users may not (and shouldn't have to) tolerate.  That's where NoSleep.js comes in: a small Wake Lock API shim to prevent the browser and device from going to sleep!

Using NoSleep.js is super easy.  To start the no sleep effect, simply add:

var noSleep = new NoSleep();

function enableNoSleep() {
  noSleep.enable();
  document.removeEventListener('touchstart', enableNoSleep, false);
}

// Enable wake lock.
// (must be wrapped in a user input event handler e.g. a mouse or touch handler)
document.addEventListener('touchstart', enableNoSleep, false);

Once you want to cede control of sleep, simply call the disable method:

// Disable wake lock at some point in the future.
// (does not need to be wrapped in any user input event handler)
noSleep.disable();

So how does NoSleep.js prevent the sleep effect?  NoSleep.js mocks a tiny mp4 video and continuously plays it, which works because browsers know enough to not signal sleep when a video is playing.  What a clever way to prevent the device from sleeping!

Will we ever get a JavaScript API that allows us to control whether the device sleeps or  not?  Possibly -- no browser vendor has committed to the Wake Lock API yet.  That's why us web developers have to stay clever and take matters into our own hands!

Recent Features

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Create Spinning Rays with CSS3 Animations & JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

Discussion

  1. Jon

    It seems the specification exists but has not yet been implemented in mobile browsers.
    https://w3c.github.io/wake-lock/

  2. Awesome! I think this might be very helpful for my friend! Keep up the good work! :)

  3. Lubos

    How does this affect the battery life?

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