AngularJS browser cache issues

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.

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)

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.