Search code examples
javascripthtmliphoneiosauto-lock

How can I prevent iPhone (including iOS 7) from going to sleep in HTML or JS?


I'm attempting to write some code to keep a phone alive and not go to sleep on a webpage.

In my search, I found this post: Prevent iOS mobile safari from going idle / auto-locking / sleeping?

But looping an audio file seems to no longer keep MobileSafari alive and prevent the phone from locking. While forcing the page to refresh every 30 seconds works, I need the original page to stay open.

Google's latest interactive music video, Just A Reflektor, seems to be preventing lock from mobile, and their JS here references a preventSleepIos function.

What could I simply do to prevent iOS from falling asleep?

Thanks!


Solution

  • If you run the minified script through http://jsbeautifier.org/ you'll get the idea of how this hack works.

    The idea of the hack is the following: If a new page is requested in safari, the ios device will reset the sleep timeout.

    Knowing that, we can can set an interval to request a new page each 30 seconds or so:

    iosSleepPreventInterval = setInterval(function () {
        window.location.href = "/new/page";
    }, 30000);
    

    Now we need to stop the request so the page will be not redirected:

    iosSleepPreventInterval = setInterval(function () {
        window.location.href = "/new/page";
        window.setTimeout(function () {
            window.stop()
        }, 0);
    }, 30000);
    

    Now there will be a request each 30 seconds to a page, so the ios device will not be put to sleep, and the request will be cancelled, so you don't navigate away from the page.

    Note: I use this code for the "/new/page":

    sleep(10);exit;
    

    This hack has been tested on iOS 6 and iOS 7. You can test it yourself on jsBin.

    Note2: Android uses different hack to prevent the device from sleeping.