Question

45

Detect application version change on a single page application

rated 0 times [ 47] [ 2] / answers: 1 / hits: 13475 / 10 Years ago, mon, april 14, 2014, 12:00:00

today a question was raised here and I don't have an evident answer.

Assume that we concatenate and minify all resource files (CSS and Javascript) and declare them in the Master-Page.

On a multi-page app, if a CSS file changes it will be recharged on the next full page load.

On a single-page app, the user can keep working for days and never recharge the main page where the CSS files are declared. The user will never see the changes until a Ctrl-F5 is issued.

I'm sure someone already thought of this and have an experience to share :)

For me, using WebSockets is not an option. First because it's overkill and second because not all my clients support the technology. Same reason applies to all WebSockets fallbacks... I won't keep hitting my servers because of this.

So, any ideas anyone? :)

BTW, we're using AngularJS if that can help for a specific solution.

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocky

Add To Favorites

Follow

Total Points: 316

Total Questions: 108

Total Answers: 110

Location: Mali

Member since Sat, Feb 12, 2022

2 Years ago

answered 10 Years ago gregorio · Accepted Answer

I've getting through this same problem. My solution which is opinionated 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 implicitly 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 ;)