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

Question

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!

Answer 1

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.