Not working as expected when NoSleep is defined/initialised and the page was hidden before enabling

[danielpietzsch]

Documentation Is:

• Missing
• Needed
• Confusing
• Not Sure?

Please Explain in Detail…

When you use NoSleep like demonstrated in the Live Demo, where you initialise the NoSleep object via new NoSleep() during page load, and only .enable() it when tapping the button, it won’t activate as expected, if the page was hidden after initial load and before enabling NoSleep.

Here’s how you should be able to reproduce this:

1. Open the Live Demo in your iOS device’s browser.
2. Hide the page (switch to another tab, or push the home button, or let the device go to sleep etc.).
3. Go back to the page in your browser.
4. Hit the button to enable NoSleep.
5. After a while, the device will go to sleep.

I experience this on my iOS 12.1 devices. Haven’t tested on Android.

Your Proposal for Changes

Not sure. Maybe this is even intended or preferred behaviour for the demo. But for me it was a bit of a head-scratcher debugging this.
So it might be relevant to amend the example code to avoid this behaviour. Here’s a quick example of what works (this is the JS from the example):

var noSleep = null; // DON’T DEFINE IT HERE
var wakeLockEnabled = false;
var toggleEl = document.querySelector("#toggle");
toggleEl.addEventListener('click', function() {
  if (!wakeLockEnabled) {
    noSleep = new NoSleep(); // DEFINE IT HERE
    noSleep.enable(); // keep the screen on!
    wakeLockEnabled = true;
    toggleEl.value = "Wake Lock is enabled";
    document.body.style.backgroundColor = "green";
  } else {
    noSleep.disable(); // let the screen turn off.
    noSleep = null // DELETING REFERENCE AGAIN
    wakeLockEnabled = false;
    toggleEl.value = "Wake Lock is disabled";
    document.body.style.backgroundColor = "";
  }
}, false);

Alternatively, it might be more suitable to amend the constructor and the enable() method, so that you could use the example code as is (and avoid creating and destroying a NoSleep object on each run) and still avoiding this “issue”.

[kylemacfarlane]

I just ran into what I assume is the same issue. I'm glad you found the solution as I'm sure this would have been trial and error.

I have a visibilitychange listener and a 5 minute timeout to disable NoSleep so the device doesn't get stuck on forever. However on iOS 12 it seems like once NoSleep has released the wakelock it can't get it back (not a problem on Android).

I found that reinitialising NoSleep on my visibilitychange listener fixed the issue:

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        clearTimeout(noSleepTimer);
        noSleep.disable();
    } else {
        noSleep.disable(); // Make sure old instance is disabled or the below iOS fix may break Android
        noSleep = new NoSleep(); // For iOS
        // Now do your normal enable code or rely on your click handlers etc
    }
});

[henrydawson]

I ran into this same problem, and unfortunately didn't find this issue until after coming to the same solution as @kylemacfarlane above. I too found that I needed to recreate the NoSleep object ( noSleep = new NoSleep(); ) after any visibilitychange event, which includes simple things like showing a file picker on iOS.

Ideally it would be great if the object didn't need to be re-created, but I'm not sure if that's possible. If it's not possible, then updating the documentation or examples would probably save people a lot of trouble.

I've only done testing on iOS 12 and some limited Android testing, but it seems that the visibilitychange event is the key indicator of when NoSleep will stop working. Perhaps the documentation could mention this and show an example like @kylemacfarlane's.