19

I was tracking down some ridiculously high load times that my app's javascript reported, and found that Android (and iOS) pause some JavaScript execution when the window is in the background or the display is off.

On Android, I found that I could use the window.onfocus and onblur events to detect when the app was switching to the background (and js execution would soon be paused, at least for new scripts), but I can't find a way to detect when the screen is turned on or off. Is this possible?

(On Safari, I had similar results except that onfocus and onblur didn't fire reliably.)

Nathan Friedly
  • 7,377
  • 3
  • 35
  • 57
  • 3
    Does turning the screen off and on not fire the `onblur` and `onfocus` events, given that Android typically goes to some sort of lock screen? I would think turning it off might fire `onblur`, and at the very least waking it up would fire `onblur` (if turning it off doesn't) because Android brings up the lock screen, and then after getting past the lock screen, `onfocus` would fire since you're transitioning from the lock screen back to the active app. I'm not an Android expert, but figured I'd throw that thought out if you hadn't checked. – ajp15243 Apr 11 '13 at 21:36
  • Well, mine didn't when I tested it, but now that you mention it, I had disabled my lock screen. It just goes back to the last app I had opened as soon as I hit the power button. Enabling the lock screen caused focus and blur events to be fired. Thanks! – Nathan Friedly Apr 11 '13 at 21:58

4 Answers4

14

I just found a pretty good solution for my use case:

function getTime() {
    return (new Date()).getTime();
}

var lastInterval = getTime();

function intervalHeartbeat() {
    var now = getTime();
    var diff = now - lastInterval;
    var offBy = diff - 1000; // 1000 = the 1 second delay I was expecting
    lastInterval = now;

    if(offBy > 100) { // don't trigger on small stutters less than 100ms
        console.log('interval heartbeat - off by ' + offBy + 'ms');
    }
}

setInterval(intervalHeartbeat, 1000);

When the screen is turned off (or JS is paused for any reason), the next interval is delayed until JS execution resumes. In my code, I can just adjust the timers by the offBy amount and call it good.

In quick testing, this seemed to work well on both Android 4.2.2's browser and Safari on iOS 6.1.3.

Nathan Friedly
  • 7,377
  • 3
  • 35
  • 57
13

There is few options to check it:

  1. Using Visibility API

  2. Using focus and blur events to detect browser tab visibility:

window.addEventListener("focus", handleBrowserState.bind(context, true));
window.addEventListener("blur", handleBrowserState.bind(context, false));

function handleBrowserState(isActive){
    // do something
}
  1. Using timers, as mentioned above
Dmytro Medvid
  • 3,980
  • 3
  • 21
  • 26
  • Hah, the initial draft of the Page Visibility spec was published about a month after I posted the question! That does seem like the correct answer at this point. – Nathan Friedly Sep 13 '16 at 18:06
  • 1
    3 years on getting a correct answer :) I working on the same issues right now, and already got a lot of new information... But I still have some problems with Android Internet Browser (based on Chromium 34) - this browser doesn't handle Visibility changes and none of described above ways not works... – Dmytro Medvid Sep 14 '16 at 07:45
4

Found a nice function here:

http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html

(function() {
    var timestamp = new Date().getTime();

    function checkResume() {
        var current = new Date().getTime();
        if (current - timestamp > 4000) {
            var event = document.createEvent("Events");
            event.initEvent("resume", true, true);
            document.dispatchEvent(event);
        }
        timestamp = current;
    }

    window.setInterval(checkResume, 1000);
})();

To register for event:

addEventListener("resume", function() {
    alert('Resuming this webapp');
});

This is consistent with Cordova which also fires the resume event.

Dunc
  • 16,506
  • 6
  • 74
  • 95
3

what will you do in your script once you now that the screen turns off? Well anyway, you can inject Java objects ( http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String) ) to interface with the activity and proxy all information you require in JS world.

comeGetSome
  • 1,823
  • 19
  • 20