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
    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?

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Six Degrees of Kevin Bacon Using MooTools 1.2

    As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and useless movie trivia so naturally I'm...

  • By
    Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like.

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?

  4. Hi David,
    Can you please check whether this code will work or not?

    /navigator.wakeLock is the main standby API property. 
    //request method requests the computer to not enter standby mode. Here "display" indicates that the monitor shouldn't enter standby mode.
    navigator.wakeLock.request("display").then(
        function successFunction() {
            // success
        },
        function errorFunction() {
            // error
        }
    //here system indicates CPU, GPU, radio, wifi etc.
    navigator.wakeLock.request("system").then(
        function successFunction() {
            // success
        },
        function errorFunction() {
            // error
        }
    ); 
    
    //release() is used to release the lock.
    navigator.wakeLock.release("display");
    

    I got this from some forums and I didn’t tried this.

    • @ezhil Why can’t you try it?

    • Fany

      no work, 2018-11-27, Android 8.1, Chrome 70

  5. Ric

    Such a clever way! Thanks!

  6. Prov94

    It looks very interesting and I need something similar like this. The good is, its working on Android 8 and Chrome browser, but the problem is the screen light, I would like to reduce the screen brightness.
    The better solution I require for my webapp is, that the screen can be locked, but the browser stay alive and is not going in sleep mode, due my web app is requesting periodically over XHR data from a server and has to ring if the data which are new in database arrive on phone.
    So thats the problem, I hope with Wake Lock API in future will be solved.

  7. I believe that an iOS update broke this on native Safari, sometime in the last few weeks.

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