Firefox does not refresh the page correctly when the state is changed when inactive

Question

We have an angular (SPA) application that supports a client-side user session (session timeout, period of inactivity, etc.). A session is used to force the user to re-log in when, for any reason, the session expires.

The expiration of a session is controlled by a dedicated service that broadcasts the event to $ rootScope when the session ends, blocks, or otherwise changes state.

We add listeners to these session state change events that change the routing to the corresponding page (login page, unlock page, etc.). We use angular -ui-router for routing.

This works great, especially in Firefox, if session state changes occur when the browser window / tab is inactive (i.e. minimized, in the background, etc.), the page does not refresh properly. In other words, you can see the controls of the new page (for example, the username and password field), but instead of seeing the background of the new page, you see the old.

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

Any thoughts?

Answer 1

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

var userSession = 'Expired'; return { getSessionState: function () { return userSession; } } 

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

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

If this does not help, make sure that you use $ timeout (the built-in Angulars timeout using the digest) and no set timeout (the timeout timeouts stop when the browser window / tab is not active and does not work right away when the tab is back on is in focus, which can lead to strange behavior in Angular).