iOS 12.2 not working

[danigilme]

• Device Name: iPhone X
• Device Version: 12.2
• Browser Name: Safari
• Browser Version: ?
• NoSleep.js Version: Last one.

Expected Behavior

Prevent to sleep my device with the official DEMO.

Actual Behavior

I tried the demo on an iPhone X with Safari on iOS 12.2 and is not working at all. I check the player and is not playing any video or smth.

Code

Just the official demo. I’ve not tried any extra code.

How Do We Reproduce?

With an iPhone with iOS 12.2 and Safari, checking the github DEMO.

[beshur]

Me too, on iPad (iOS 12.2)

[ngerritsen]

Personally I only have it not working when I add the site to my homescreen as a fullscreen app and re-open it.

[ngerritsen]

Just copying what I wrote on the other bug on iOS, just my findings:

I am having the same issue. It ONLY works right after I added the app to the homescreen, but it doesn’t if I close and open it again.

Edit: It’s getting more interesting, I actually have that same problem if I do not add it to my homescreen, if I re-open iOS safari (without doing a hard reload) it doesn’t work anymore... I have the idea the dummy video is “stuck” or not able to play anymore.

Edit2: did some more investigating, it seems it’s actually working always if I reconstruct nosleep before enabling it every time, so like

let nosleep = null;

function enable() {
  if (nosleep) nosleep.disable(); // Just to be sure if you forgot to disable.
  nosleep = new NoSleep();
  nosleep.enable();
}

function disable() {
  nosleep.disable();
}

It seems to fix the problems I had, but I’m just giving the information I now have, I’m not sure if it’s the actual solution.

[beshur]

@ngerritsen, it may happen due to let block scoping, if you declare nosleep in some other block, far from enable function body. Or you posted complete of your code?

[ngerritsen]

@beshur what would happen due to let scoping? The example I posted actually fixes the issue, because I create a new instance every time. Nothing to do with scoping.

[beshur]

@ngerritsen, I was saying if in your previous realisation nosleep instance was declared not within the enable/disable scope, that may be an issue.

Anyway, even the demo page does not work for me.

[ngerritsen]

@beshur yes because the example probably doesn’t recreate the instance, because this is not how the documentation states you should do it. Maybe try my workaround, can you show your code? Are you sure you enable synchronously inside an event listener?

[danigilme]

As far as I’ve seen, the demo is not working properly. Because I know a page which uses it (version 0.7.0) and it’s working perfectly. So I think the problem is with the demo page 😅.

[ngerritsen]

@danigilme the problem is not with the demo page, the problem is that when you navigated back to an iOS Safari tab/browser, enable() doesn’t work anymore.

I think after navigating back to a browser screen in iOS the video get’s to some kind of invalid state

Doing (new NoSleep()).enable() solves that case, probably because it recreates the video.

My preliminary conclusion: You need to recreate the html5 video to make it consistently work.

[danigilme]

Okay thanks then. When I can I will try it and hope it works 🙈

[beshur]

Guys, I'm not sure what happened, but both the demo page and my code work now.
Did not use @ngerritsen suggestion of creating new instances on NoSleep every time.

However I slightly modified the library itself - added an isEnabled method, which returns ! this.noSleepVideo.paused, and I only call enable if it's not yet enabled.

[danigilme]

Great to know that! 🙌

[ngerritsen]

@beshur sounds good, would be nice if that could be the solution.

[Domratchev]

I believe this PR fixes this issue:
virpo#1

[mhoeneveld]

I solved it by using the document.visibilityState;
Indeed on iOS the noSleep function is disabled as soon as the PWA goes to the background. The rest of the site works fine after moving it to the foreground again but not the noSleep function.
By detecting the document.visibilityState you can or reload the page or just enable wakeLockEnabled.

	<script>
		const state = document.visibilityState;
		
		document.addEventListener('visibilitychange', () => {
		  console.log(document.visibilityState);
		  if ( document.visibilityState == "visible" ) {
		  	//reload if the page comes back to visible
		  	window.location.reload();   //Reload the whole page or use the commands below.
                       //          noSleep.enable(); // keep the screen on!
                       //          wakeLockEnabled = true;		  	
		  }
		})
	</script>