richtr / NoSleep.js

Prevent display sleep and enable wake lock in any Android or iOS web browser.
MIT License
2.24k stars 379 forks source link

It doesn't work when re-focusing on tab #126

Open jester6san opened 3 years ago

jester6san commented 3 years ago

Tested on iOS 14.5.1, Google Chrome and Safari. I've tried enabling and disabling, initialising it again using window.onblur and window.onfocus events. Are there any solutions for this?

jovanchohan commented 3 years ago

I've noticed the same thing. On iOS Safari the device falls asleep after being backgrounded and foregrounded even though when I drag down from the top of the iPhone to see that menu I can see the video playing on a loop. I've also noticed that when the device is charging this isn't an issue, but when the device is not charging then backgrounding and then foregrounding does not work.

jovanchohan commented 3 years ago

What I've found is that after a tab becomes hidden and then visible again (as can be determined by the PageVisibility API), you need to capture a new user interaction to play the hidden background video to prevent the device from falling asleep.

jester6san commented 3 years ago

Hey I tried that, but it fails to resume or re-initialize the plugin. I've only tested this on iPhone since that's the main platform that's going to run my project...

vivipeder commented 3 years ago

Try this code:

var btnNoSleep = document.createElement('button');

btnNoSleep.onclick = function() { if (noSleep.isEnabled()) { noSleep.disable(); }

noSleep.enable();

};

document.addEventListener('visibilitychange', function() { if (document.visibilityState == "visible") { btnNoSleep.click(); } });

Apparently it works for me on Safari IOS 14.7.1