AngularJS browser cache issues

Question

Good morning, I have a web application in production environement. The users are using it every day, when I publish an update and a user comes back to the web application he views the old version of the web application. He needs to refresh the browser to load the new version. How can I solve this problem? I cannot tell hundreds of users to refresh the page every time I publish an update (3-4 times a week).

Answer 1

If you are using HTML5, then you can use the Application Cache. It will automatically check for updates and you can prompt the user to refresh the cache.

Here are some good tutorials on how to use it:

A Beginner's Guide to Using the Application Cache

Using the application cache

Let's take this offline (offline web applications)

Answer 2

A simple solution would be to add query strings representing timestamp or session id to your files.

For e.g., in our spring applications, we simply use :

<script src="js/angular/lib/app.js?r=<%= session.getId()%>"></script>

You can implement the same solution in your server specific implementation too.

Answer 3

The first step would be to understand what's happening server side right now. Understand and configure Cache-Control and Etag. While you can use query string parameters, file fingerprinting is a better technique since proxy servers will be allowed to cache the file.

The idea is that you set your documents that can change (if you have an Angular app this is most likely just your index.html) to no-cache and aggressively cache resources that that document references. When you release a new build, your resources are all renamed and when a request comes in everything works as expected.

I use grunt-rev in my Angular app. Works great.

Answer 4

The classic cache problem. Unless told otherwise (by the webserver) the browser is going to cache assets based on the files name. So when it sees the same script/style/image with the same name it will 304 and serve the cached version. There are several ways around this, you can:

Configure the webserver to tell browsers not to cache the file. This is obviously inefficient as the user will have to download the same file time and time again.

Append a query string parameter to the filename such as my-angular-code.js?x=123, again inefficient.

Fingerprint your assets. This is neatly explained in Rails' Asset Pipeline documentation. There are several ways to achieve this, there are grunt tasks and gulp tasks also available for this. Essentially it is the process of changing the file name only when the contents changes, forcing the browser to consider it a new file.