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.

Answer 2

You are going to have to make a request to a server, which is unfortunately not possible with strictly HTML or JS. Both of these are front-end scripting languages, meaning, that once the DOM is loaded, manipulation of the DOM with vanilla HTML and CSS will only affect the front-end.

As far as I know, there are only a handful of ways to prevent iOS from going to sleep, one of which is to make a toy app that gets a service in iOS over and over, and the other would be to set application.idleTimerDisabled = YES, but both of these solutions are out of the scope of web front-end technologies.

If you want to prevent a session from being lost through a web app, you could write a cheap server side function to ping the time of the server every so often so as to preserve the user's session.

Example using javascript and PHP:

function cd(){
   var alerttime = "<?php echo date('h:i:s', (strtotime($_SESSION['ordertime']) + (1 * 60)));  ?>"
   var extratime = "<?php echo date('h:i:s', (strtotime($_SESSION['ordertime']) + (2 * 60)));  ?>";
    redo();
}    

function getTime(){
    currenttime = "<?php echo date('h:i:s', time()); ?>";

   var cd = setTimeout("getTime()",1000);
    }