How to handle expired files without refreshing the browser when using Single Page Application (SPA)?

Question

I have done a full Single Page Application (SPA) application using Angularjs.

So far so good.

As anyone knows, all javascript files are loaded in the first time access. Or, some file are loaded in lazy mode style when needed.

So far so good...

The situation is: the server updates all files (html partials, javascripts, css's) and the client remain with a lot of files out-dated.

This would be simply solved refreshing the browser, hit F5 key, control+f5, or refresh button in the browser. But this concept does not exists when working with SPA.

I'm not sure how to solve this problem.

I could detect somehow (doing a ping maybe) and just to re-load that specific file. With document.write strategy. But now rises another problem, I have a single javascript file with all javascript minified.

I could try to force a full reload in the browser or force to re-login (and reload because login are SPA part).

But reloading is an ugly solution, imagine the client lose all data in the form because he was unlucky the server have just updated. And worse, I must now create some "auto-save" feature just because of this.

I'm not sure how to handle this, if possible, doing in "angular way".

I wonder how google gmail handles this because I stay logged for many many hours without logging of.

Answer 1

As others have already suggested, keep the logged user on the old version of your webapp.

Not only what you ask is difficult to do in Angular, but it can also lead to a bad user experience and surprising behaviour, since there may not be a mapping between what the user is doing with the old version and what the new version provides. Views may be removed, renamed, split or merged. The behaviour of the same view may have changed, and doing so without notice for the user may cause mistakes.

You made an example with Gmail, but may have noticed that changes to the UI always happen after you logout, never while you're using it.

First of all, if your app is an intranet website used during office time, just update it while nobody is using it. This is a much simpler solution.

Otherwise, if you need to provide 24/24 availability, my suggestion is:

• When you deploy the new version of your SPA, keep the old version in parallel with the new version, keep the current users on the old version, and log new users to the new version. This can be made in a number of ways depending on your setup, but it's not difficult to do.

• Keep the old version around until you're confident that nobody is still using it or you're pretty sure that the new version is ok and you don't need to rollback to the old version.

• The backend services should be backward-compatible with the old version of the frontend. If that's not possible you should keep multiple version of the backend services too.