Firefox doesn't update the page correctly when state changed when not active

Question

We have an angular application (SPA) which maintains client side user session (session timeout, inactivity period, etc.). The session is used to force the user to re-login when the session expires for some reason.

Expiration of the session is controlled by a dedicated service, which broadcasts an event on $rootScope when the session terminates, locks, or otherwise changes state.

We add listeners to those session state change events that change the routing to the relevant page (login page, unlock page, etc.). We're using angular-ui-router for the routing.

This works fine, however, specifically in Firefox, if the session state changes take place when the browser window/tab is not active (i.e. minimized, in the background, etc.), the page isn't refreshed properly. In other words, you can see the controls of the new page (e.g. username text field and password field), but instead of seeing the background of the new page, you see the old one.

It works perfectly in Chrome and IE, we only see this problem on Firefox. Moreover, when the browser window/tab is active, it also works perfectly on Firefox.

Any thoughts ?

Answer 1

Let it be the other way. Do not use rootScope broadcast, just take a var in your service with the current state, and return the function with this value.

var userSession = 'Expired';

return {
   getSessionState: function () {
      return userSession;
   }
}

and watch it in your controllers. So the first digest run will switch the view to one you need now.

$scope.$watch(function () {
    return yourServiceName.getSessionState()
}, function (val) {
   //you can check the val here and change the route
});

If this not helped, make sure that you use $timeout (Angulars native timeout using digest) and no any set timeout (JS timeouts are stopped when the browser window/tab is not active and than fire all at once when the tab is in focus again, what can end up with strange behavior in Angular).