How to detect in iOS webapp when switching back to Safari from background?

Question

Depending on what you need to support, you need a variety of different techniques to detect when a page becomes visible. Variations occur due to browser vendor, browser version, OS, running within WebView/UIWebView/WKWebView, etc.

You can view which events are occurring by using this page. I have found that to detect when the page “wakes up” on all combinations I needed to register all of the following events:

window visibilitychange event
window focus event
window pageshow event
starting a timer and seeing if the timer took much longer than it should have (timers are put to sleep by iOS when hibernated). An App using UIWebView doesn’t fire the visibilityChange event even on iOS9 (WKWebView is OK).

I used to use webkitRequestAnimationFrame as well, but I removed that because it could cause jank (AFAIK the rendering engine does a blocking call to the main thread for it).

Things to try:

Go to another tab
Lock screen, wait, unlock
Bring another app to focus
Minimise browser

You can see which events are happening:

in real time by looking at the console log (attach debugger).
in real time on a device by using http://output.jsbin.com/rinece#http://localhost:80/ and see the log get requested as Ajax calls (use a proxy, or run a small server on the address after the # and log the body to console).
look at the on screen log, and pay close attention to the time logged for each entry to see if the entry was logged e.g. visibilitychange hide event might not occur when page is actually hidden (if app is hibernated), but instead is queued and occurs when page is reshown!!!

iOS: beware if using a timer to detect if an iOS UIWebView has gone to sleep, you need to measure the difference using new Date.getNow() and not performance.now(). That is because performance.now() stops counting time when the page is put to sleep also iOS was slow to implement performance.now()… (Aside: you may be able to measure the amount of time the page was asleep for by detecting the discrepency of differences for new Date.getNow() and performance.now(). Look for the != on the test page).

If you are using UIWebView then there are two techniques that work (You must use UIWebViewif you support an iOS7 App). WKWebView has the visibilitychange event so workarounds are not required.

==Technique 1.

When the applicationWillEnterForeground event occurs in the app, call UIWebView stringByEvaluatingJavaScriptFromString to call your JavaScript pageAwakened().

Benefits: clean, accurate.

Downside: needs Objective-C code. Called function needs to be accessable from global scope.

==Technique 2.

Use webkitRequestAnimationFrame and detect a time lag.

Benefits: JavaScript only. Works for mobile Safari on iOS7.

Downside: ugly risk of jank and using webkitRequestAnimationFrame is a severe hack.

// iOS specific workaround to detect if Mobile App comes back to focus. UIWebView and old iOS don't fire any of: window.onvisibilitychange, window.onfocus, window.onpageshow
function iosWakeDetect() {
    function requestAnimationFrameCallback() {
        webkitRequestAnimationFrame(function() {
            // Can't use timestamp from webkitRequestAnimationFrame callback, because timestamp is not incremented while app is in background. Instead use UTC time. Also can't use performance.now() for same reason.
            var thisTime = (new Date).getTime();
            if (lastTime && (thisTime - lastTime) > 60000) {    // one minute
                // Very important not to hold up browser within webkitRequestAnimationFrame() or reference any DOM - zero timeout so shoved into event queue
                setTimeout(pageAwakened, 0);
            }
            lastTime = thisTime;
            requestAnimationFrameCallback();
        });
    }
    var lastTime;
    if (/^iPhone|^iPad|^iPod/.test(navigator.platform) && !window.indexedDB && window.webkitRequestAnimationFrame) {    // indexedDB sniff: it is missing in UIWebView
        requestAnimationFrameCallback();
    }
}

function pageAwakened() {
    // add code here to remove duplicate events. Check !document.hidden if supported
};

window.addEventListener('focus', pageAwakened);
window.addEventListener('pageshow', pageAwakened);
window.addEventListener('visibilitychange', function() {
    !document.hidden && pageAwakened();
});

Leave a Comment Cancel reply