Prevent iOS mobile safari from going idle / auto-locking / sleeping?

Question

In an iOS app you can set application.idleTimerDisabled = YES to prevent the phone from auto locking.

I need to do this in mobile safari for a game like Doodle Jump where the user may not touch the screen for an extended period of time. Is there any documented method or hack to do this?

(Update) They seem to be doing it somehow in this site http://www.uncoveryourworld.com. Visit from your iphone and when you get to the buildings/street scene with music playing in the background just leave your phone alone. It never goes to sleep.

(Update 2) I've spent some time taking a closer look at how they might be keeping the phone from going to sleep. I've done a barebones test and it seems that the way they are looping the audio in the street scene is what keeps it from going to sleep. If you'd like to test this just put a simple audio player that loops on your page and click play:

<audio src="loop.mp3" onended="this.play();" controls="controls" autobuffer></audio>

Everywhere I searched it is being said that this isn't possible, so it is nice to see there is at least some way to do it even if a bit of a hack. Otherwise a browser based game with doodle-jump style play would not be possible. So you could have a loop in your game/app if appropriate or just play a silent loop.

Answer 1

NoSleep.js seems to work in iOS 11 and it reportedly works on Android as well.

---

Old answer

This is a simple HTML-only method to do that: looping inline autoplaying videos (it might also work in Android Chrome 53+)

<video playsinline muted autoplay loop src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" height=60></video>

See the same demo on CodePen (includes a stopwatch)

Notes

• Avoid loading a big video just for this. Perhaps make a short, tiny, black-only video or use
• To make it fully work, the videos needs to be always in the viewport or you need to start its playback via JS: video.play()

Answer 2

Edit: This work around no longer works. It is not currently possible to prevent the phone from sleeping in safari.

Yes, you can prevent the phone to sleep using an audio loop. The trick won't start automatically, you will have to play it when the visitor touches the screen.

<audio loop src="http://www.sousound.com/music/healing/healing_01.mp3"></audio>

Test page: tap play and the display will stay on but it will dim on some devices, like an iPhone with iOS 7.

Note: be careful using this trick because it will stop any music that the visitors might be using—and it will annoy them.

Answer 3

[edit] random bug behavior, sometimes lockscreen media controls showing, sometimes not

Years later, updated my code

Easy steps :

• unlock audio context
• create silent sound
• loop it and play forever
• keep tab active

Working on Safari iOs 15.3.1, tab & browser in background, screen off

// unlock audio context
let ctx = null;

// create silent sound
let bufferSize = 2 * ctx.sampleRate, 
    emptyBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate), 
    output = emptyBuffer.getChannelData(0);

// fill buffer
for(let i = 0; i < bufferSize; i++) 
    output[i] = 0;

// create source node
let source = ctx.createBufferSource();
source.buffer = emptyBuffer;
source.loop = true;

// create destination node
let node = ctx.createMediaStreamDestination();
source.connect(node);

// dummy audio element
let audio = document.createElement("audio");
audio.style.display = "none";
document.body.appendChild(audio);

// set source and play
audio.srcObject = node.stream;
audio.play();

// background exec enabled

Answer 4

No, you can't do this, unfortunately. The only way to achieve this is by making a UIWebView-application and setting the variable you provided there.
https://stackoverflow.com/a/7477438/267892

Answer 5

Even if this approach might not be suitable in every case, you can prevent your phone from locking by reloading the page using Javascript.

// This will trigger a reload after 30 seconds
setTimeout(function(){
    self.location = self.location
}, 30000);

_{Please note that I tested this with iOS7 beta 3}

Answer 6

You can stop sleeping and screen dimming in iOS Safari by faking a refresh every 20–30 seconds

var stayAwake = setInterval(function () {
    location.href = location.href; //try refreshing
    window.setTimeout(window.stop, 0); //stop it soon after
}, 30000);

Please use this code responsibly, don't use it "just because". If it's only needed for a bit, disable it.

clearInterval(stayAwake); //allow device sleep again when not needed

Tested in Safari iOS 7, 7.1.2, and 8.1, but it may not work in UIWebView browsers like Chrome for iOS or the Facebook app.

Demo: http://jsbin.com/kozuzuwaya/1

Answer 7

bfred.it's answer works if you replace the audio-tag with a <video src="..." ... playsinline> tag - but only if the page is open in iOS10+ Safari AND the user has started the video. You can hide the video with CSS.

Also, I suspect that this feature will also be removed at some point.

Answer 8

This is based on nicopowa's answer, which saves a PWA from being suspended by iOS. (Playing an infinite loop of nothing keeps the app running - even with the screen turned off.)

In order to also make sure that it's triggered by user interaction,
the only thing to change is instead of

let ctx = null

put

let ctx = new AudioContext()