Javascript Event For Mobile Browser Re-launch Or Device Wake

Morning all, I'm looking for some kind of Javascript event I can use to detect when a mobile browser window regains focus, after either a user closes/minimizes their browser (to go

Solution 1:

We had a similar issue and solved it something like this:

var lastSync = 0;
var syncInterval = 60000; //sync every minutefunctionsyncPage() {
  lastSync = newDate().getTime(); //set last sync to be nowupdatePage(); //do your stuff
}

setInterval(function() {
  var now = newDate().getTime();
  if ((now - lastSync) > syncInterval ) {
    syncPage();
  }
}, 5000); //check every 5 seconds whether a minute has passed since last sync

This way you would sync every minute if your page is active, and if you put your browser in idle mode for over a minute, at most 5 seconds will pass before you sync upon opening the browser again. Short intervals might drain the battery more than you would like, so keep that in mind when adapting the timings to you needs.

Solution 2:

Better than an interval would be to add a window blur listener and a window focus listener. On blur, record current time. On focus, validate you are still logged in / sync'd / whatever you need to do.

Basically exactly the same thing but it runs only when necessary rather than slowing your entire page down with an interval.

Update

var$window = $(window),
  $window.__INACTIVITY_THRESHOLD = 60000;

$window.add(document.body);  //necessary for mobile browsers$window.declareActivity = function () { $window.__lastEvent = new Date(); };

$window.blur($window.declareActivity);
$window.focus(function(){
  var diff = (new Date()) - $window.__lastEvent;
  if (diff > $window.__INACTIVITY_THRESHOLD) { 
     $window.trigger("inactivity"); 
  }
});

$window.on("inactivity", "", null, function () {
  //your inactivity code
});

Though that blur event seems sketchy if the phone is powering off and I don't know that I would trust it in all circumstances / mobile devices. So I'd probably throw in something like this:

$(document.body).on("click scroll keyup", "", null, $window.declareActivity);

so that my inactivity timer works for when the user just walks away as well. Depending on your site, you may want to adjust that exact event list - or simply throw in a $window.declareActivity(); into your existing scripts that respond to user inputs.