Detect application version change on a single page application
I've getting through this same problem. My solution which is opiniated and may not respond to your criterias :
When i package my front-app and my server-app, I share a configuration file containing the current version of the front-app.
Front side : 75% of my routes change implicitely call a Webservice (route change resolve). SO each time I call my server I include a custom HTTP header (or a GET/POST param) containing the client version of the front-app.
Server side : I compare the front-app version (the one in the browser of the user, loaded last time user refreshed/loaded the SPA) with the front-app version of the shared configuration file :
- If version matches : I Do nothing.
- If version don't match I send a custom HTTP status error code (418 for example)
Then front side: I added a response Interceptor that intercepts any 418 error code and do a force-refresh of the whole app
That's it. Basically the event that "check" if the front-app version is the latest is a route change (that calls a WS via ajax). But you could add some infinite $interval calling a dedicated WS each 5 minutes or so...I can add some code if needed.
Hope this helps ;)
Assuming that you are using AngularJS' routing via $route service and provider, then you can use $routeChangeSuccess
event to perform a server request if there are significant changes that needs to be changed; if there are any then you can do a window.location.reload() to refresh the page and get all the updated resources and htmls.
The following process can be changed depending on how you want to implement it:
1. Setup a config file in your server indicating the app's version. You may also choose to assign different versions for different files but since you have concatenated all your resource files then I guess you may limit your version options in your configuration.
2. Create a service that contains all the necessary information(versions of files from the server) and methods to perform a server request to your server to check against the current file versions stored in the service.
3. Use $routeChangeSuccess event to perform a server request using the service that you have created in step 2, if the request returned a valid confirmation that there were changes then do the force page reload via window.location.reload()
.
I decided to add my final thoughts as an answer here too:
We went for a reduced solution for now.
As we have a "proxy service" that is (again for now) the only one that interacts with this application, we added the application version on the http header of all responses. If we receive a newer version, a popup appears notifying the user and a full page refresh is issued...
This solution won't work for applications that don't have their own "private" service.