45

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.

6
  • Possible duplicate of stackoverflow.com/questions/7477424/…
    – Emil
    Mar 14, 2012 at 20:41
  • I didn't know about application.idleTimerDisabled = YES for iOS programming (or it didn't exist in iOS3 when I did this) and so I used to play a silent audio tone every minute or so. A delay between plays should increase battery life rather over your constant loop. (But you'd need to test that it still keeps it awake)
    – Andiih
    Dec 13, 2012 at 10:30
  • 1
    I tired adding the audio loop, but the phone still goes to sleep. Feb 5, 2013 at 18:57
  • Any updates on this? I want my web app to stay "awake" without it always auto-locking.
    – Jared
    Jun 9, 2013 at 7:35
  • 2
    This seems to work well on both iOS and Android: github.com/richtr/NoSleep.js Nov 7, 2015 at 10:05

9 Answers 9

14

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()
6
  • Whoops, I'm lying! I was testing it on my device using Firefox as the browser, using Safari it works. Confirmed working on 10.2 😄
    – Anthony
    Dec 26, 2016 at 19:37
  • Confirmed NoSleep.js on iPhone 5S running iOS 10.2.
    – Gup3rSuR4c
    Jan 18, 2017 at 20:21
  • Please edit your answer again to mention that NoSleep.js works: your answer begins with "EDIT: none of the solutions currently on this page work on iOS 10.2+" which is misleading. Jan 18, 2018 at 16:16
  • 1
    Hi, is that working at the moment? Because for me is not. I’m in iOS 12.2. Thanks!
    – Dani G.
    May 10, 2019 at 20:41
  • Does not work for IOS15.1
    – Szundi
    Dec 2, 2021 at 20:58
8

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.

3
  • Is this entire thing is needed to keep the screen from turning off? Which part is the crucial part?
    – eykanal
    May 6, 2014 at 1:18
  • @eykanal I cleaned it up. An <audio> tag is all that's necessary.
    – fregante
    Jun 17, 2014 at 2:13
  • 1
    Shouldn't a looped VIDEO do the trick? Android definitely does not go to sleep when watching a video in Chrome (e.g. on YouTube, meaning the website). Does iOS??
    – matteo
    Feb 28, 2016 at 20:17
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
2

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

2
  • I added a link to a site I found, which seems to be achieving this in mobile Safari.
    – forrex
    Mar 15, 2012 at 16:36
  • You might want to send them an email and ask them about it. I didn't make that site ;)
    – Emil
    Mar 15, 2012 at 17:21
0

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

3
  • 1
    It does in Safari iOS 7.1.2 and iOS 8. Demo: jsbin.com/nekizeloca/1 It doesn't work in WebViews like Chrome and Facebook, though.
    – fregante
    Oct 24, 2014 at 18:34
  • I'm testing in Safari iOS 7.1.2, on iPhone 4s and iPad and I can't get it to work with this demo as well...
    – Domchi
    Oct 26, 2014 at 23:52
  • What about using iframe and setting the source of iframe over and over? Kinda faking reload without to really reload? May 30, 2016 at 20:11
0

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

7
  • 1
    It works fine on iOS 7.1.2 and iOS 8. Try the demo. Both of my devices are awake after 4 minutes even though the auto-lock timer is at 1 minute.
    – fregante
    Oct 24, 2014 at 18:33
  • demo doesn't work for me on both iPad and iPhone, iOS 7.1.2. Don't know why, auto-lock is respected.
    – Domchi
    Oct 26, 2014 at 23:47
  • 1
    There seems to be few issues with this approach. Firstly, when the current URL has hash in it, this will not work. Probably because updating the location that has hash string does not trigger page load. This can be worked around by using a location without hash string (just "/" for example). This works on iOS 8.3, but brings us to the second issue, on Android it obviously doesn't work and seems that when the device goes to sleep, it executes the location change without it being stopped.
    – Cvuorinen
    May 19, 2015 at 20:16
  • Related to comment above, so what I ended up using is a version of this solution with location.href = "/"; and then only execute this code on iOS (check OS from user-agent) and this seems to work as far as I have tested it.
    – Cvuorinen
    May 19, 2015 at 20:23
  • Also, it does not work if you add the page to home screen (probably for the same reason it doesn't work in other browsers), it only works in Safari.
    – Cvuorinen
    May 19, 2015 at 20:38
0

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()
2
  • You know about the commenting privilege which you do not have, so well that you can even put it into words. You are aware of the rule meta.stackexchange.com/questions/214173/… . In that situation please do not decide to misuse a different mechanism (an answer) for something it is not meant for and which you are not allowed yet to do.
    – Yunnosch
    Oct 3, 2022 at 15:09
  • I have however done an edit, which I think turns you post into an answer. Please review to find what I might have logically broken. Maybe you can also edit to further improve according to How to Answer.
    – Yunnosch
    Oct 3, 2022 at 15:13
0

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.

0

Today, I tried using the WakeLock API to keep Safari iOS alive (works as of now). It looks like they began supporting this is March 2023 for https. Note, at this time it looks like typescript isn't caught up with Navigator's use of WakeLock, so feel free to write extensions or just use @ts-ignore. Here's a react solution, you would probably want to call your functions with some kind of useEffect unless you're planning on keeping WakeLock active with persistence.

const wakeLockRef = useRef(null)

if (wakeLockRef.current) {
    wakeLockRef.current.release()
    wakeLockRef.current = null
}

const startWakeLock = () => {
    try {
      // @ts-ignore
      if ("wakeLock" in navigator && navigator.wakeLock.request) {
        // @ts-ignore
        wakeLockRef.current = await navigator.wakeLock.request("screen")
        console.log("Wake Lock is active")
      }
    } catch (err) {
      console.error(`Could not obtain wake lock: ${err.message}`)
    }
}

const stopWakeLock = () => {
    if (wakeLockRef.current) {
      wakeLockRef.current.release()
      wakeLockRef.current = null
      console.log("Wake Lock has been released")
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.