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

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

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!