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!

Costanza

Welcome to Stack Overflow! Interesting. What have you found out about preventSleepIos? – Salvo

Hi @amp, I can't say I'm skilled enough to break down the minified code to figure out exactly what it's doing. – Costanza

isn't there a non-minified version? – Salvo

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.

Feel

hello! this doesnt seem to work on my end.. new/page is loaded without stopping before.. – Daily

Heh -- I was reading this tutorial because I'm writing an API to turn phones into controllers without an app, without realizing that google did the same thing. Anyway, works in ios safari, but in chrome they make you hold down a button continuously to keep the thing awake. Terribly uncomfortable. – Sthilaire

Hi, I have implemented this 'hack' into my site and it works in safari, I have also added the hack for chrome (only tested on android): just add an event listener to touchstart (on mobile, you can't auto play videos) and create a silence video. This stops the sleep timer on chrome. This is my script: static.pin-point.io/js/os/prevent-sleep.js – Feel

@loulian Alexeev I'm trying to implement your script for ios. Just the initial post that you wrote. After 30 seconds the new window opens. Also where are you defining sleep at the end? – Tops

@loulian Alexeev Nevermind. This worked great in Safari. I'm new to JavaScript so I'm having a hard time reading through your static script. I get this error on the second line that Pinpoint is not defined, any ideas? – Tops

@Tops Hi, 'PinPoint' is just an global object that I use throughout all the scripts on my site. 'var PinPoint = PinPoint || {};' You can define your own custom object or add everything to 'window.' – Feel

Before anyone goes into the trouble of trying to change the location of an iframe instead of the whole window: It doesn't work in iOS 7, I tried. – Hamlin

@tekunokurato, you should check out greggman.github.io/HappyFunTimes if you haven't already. It's controllers without an app. Even supports connecting without typing. – Gradate

I would consider preventing location request if the document.hidden is true, otherwise stopping the request does not seem to work. – Upward

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);
    }

Bueschel