NoSleep.js
NoSleep.js copied to clipboard
richtr
Not working with Safari IOS 15.0
From my quick tests, iOS 15 Safari stays awake only if the video is playing, has no loop flag, is not muted AND is visible on a webpage (also tried absolute positioning with opacity:0 with no luck).
At this point, with no new workarounds available, there's only hope for proper Screen Wake Lock API support somewhere in the future.
Not working for me on iOS 15.0.2. Also I am seeing in Network tab that the video is infinitely fetched?
It happens to me too. I have it set that once you press the login button, the function is activated to prevent the screen from suspending. The call and execution seems to work fine, but it doesn't work, and both on IOS and Android and on computers, the screen turns off.
I can confirm it's not working on iOS 15.1 but on Androids are. Seems the event 'timeupdate' is not being called. Then, the video is only played once. Tried many things but none gave any good result.
@brunocarneiro @paulaegido @rhamnett Found a solution. It seems that the timeupdate event is only triggered when the element is actually appended to DOM, so this few lines did the trick.
const hideCss = {
position: 'absolute',
left: '-100%',
top: '-100%'
}
Object.assign(this.noSleepVideo.style, hideCss);
document.querySelector('body').append(this.noSleepVideo);
this.noSleepVideo.addEventListener("loadedmetadata", () => {
[...]
@richtr - I'm kinda too lazy to fork the whole repo, would you apply this to the code?
@RotemAkerman - Well I guess you are missing something, would need to see the code to help.
My bad, had the script in <head> so <body> wasn't indeed present during execution
This works on an iPhone 8 but doesn't work on an iPhone SE2020 both running 15.1
const hideCss = { position: 'absolute', left: '-100%', top: '-100%' } Object.assign(this.noSleepVideo.style, hideCss);
document.querySelector('body').append(this.noSleepVideo);
this.noSleepVideo.addEventListener("loadedmetadata", () => { [...]
@z-x where should I put this? I have my NoSleepJS in my custom.js.
Okey this works for me! https://github.com/Uriopass/NoSleep.js
Found it in https://github.com/richtr/NoSleep.js/pull/138
Hey everyone, it seems it stopped working. Is it happening with you too?
@brunocarneiro @dkt01 iOS 15.6.1 seems to be working for https://pushu.ps running as a PWA, the source is open if you want to figure it out by yourselves: https://github.com/z-x/pushu.ps/
@z-x That site isn't working on my phone either. It still locks the screen after the time I've configured. My app is also an open source PWA ( Sequence Timer - Source ). nosleep.js is activated while the timer is running. On the pushu.ps site, at what point is it supposed to disable sleep?
@dkt01 - on the training screen, right after you click 'Start next training'. I've just checked and left the screen open and it does not turn off.
@z-x, thanks. I can confirm that that page within pushu.ps does keep my screen awake and unlocked. I'll have to check how my application is misusing the nosleep.js library.
[ Quote pinoceniccola @ CE 2021-09-28 10:56:16 UTC: https://github.com/richtr/NoSleep.js/issues/135#issuecomment-929079462 iOS 15 Safari stays awake only if the video ... is visible on a webpage ] <^> Unsure what's going on with Safari. But from my testing on large variety of browsers [1]: all of them could work without having the "<video>" attached to the DOM. And Chrome (all versions) doesn't seem to require the existence of audio.
[1] Both contemporary and legacy Firefox and Chrome.
fwiw, i'm using iOS 15.7 and i cannot reproduce this issue. i'm not sure if something changed in later versions of iOS 15, but inserting the video into the document seems not to be necessary anymore...
