AngularJs force browser to clear cache

Question

My angular application is constantly changing these days because our team runs rapid updates right now.

Because of cache our clients does not always have the newest version of our code.

So is there a way in angular to force the browser to clear cache?

Solution 1

You can use a very simple solution that consist in append a hash to your scripts files. Each time your App is deployed you serve your files with a different hash automatically via a gulp/grunt task. As an example you can use gulp-rev. I use this technique in all my projects and works just fine, this automatized in your build/deploy process can be a solution for all your projects.

Yeoman generator for AngularJS generator-gulp-angular (this was my generator of choice) use this solution to ensure that the browser load the new optimazed file and not the old one in cache. Please create a demo project and play with it and you will see it in action.

Solution 2

As mentioned above the common solution to solve browser cache issues is adding some kind of version token (version number, timestamp, hash and so on) to loaded resource files. This covers cases when user load page or reload it. As already told gulp task, WebPack, some backend frameworks as Asp.net MVC and so on support this feature together with bundling, minimization, obfuscation and so on. It's better to use them resolving another related issues too.

But one think they can't resolve it's updating the main page itself and loaded already files when they were changed (deployed) on backend side. For instance you deploy app while another users work with your single page without reloading it. Or a user left app open in browser tab and in an hour comes back to this page. In this case some loaded already files including main page are old and some on backend side are new ones. Also all loaded already files have old references to files which are may not exist in backend but cached in browser. So, in general you have broken application here and it's actually more general problem which Angular can't solve itself.

To solve this you need to notify your user that a new app version exists and they need to reload page or to reload it by force. The second approach is not good from user experience perspective. Let's imagine you are working and at some moment page starts reload itself. Weird, right?

In order to notify user about new version you can use websokets message to app about new version, pass version in every response (not a good solution) or pull backend from time to time about a new version (not a good too). But they all are not trivial. If your app login session is short you can check version while relogin, refreshing auth cookies and so on.

So, to solve this problem fully you need to implement files bundling + new version user notification mechanism.

Solution 3

If you are looking for a really simple solution and your IDE is visual studio under C# you can get app build Id and concatenate on your js file url.

First you should activate incrementation for minor versions like that:

Go to your project properties, under Application on the new window, click Assembly Information and add a "*" to Assembly version (last digit as described on image above).

After that, add a new property to your codebehind aspx, or web service or webapi, etc... for this piece of code I'm using aspx:

    public string GetVersionApp => System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();

Then, call the property through your html and concatenate the value as param on your url file, like this:

<script type="text/javascript" src="App/RequestsList/directives/comment-directive.js?<%=GetVersionApp%>"></script>

With this solution, your files only be reloaded if a new build occurs.

Comments

[Razvan Dumitru]

Add ?ver=timestamp to url or as ^ said to the scripts.

[Marc Rasmussen]

@RazvanDumitru what about the HTML on the page will that be updated aswell?

[Razvan Dumitru]

You can handle that with meta tags. stackoverflow.com/questions/1341089/… . Note that it isn't working in IE5 or some strange browsers like that.

[aUXcoder]

Yes, this in specific requires gulp but if you are using Webpack is much easier using the hash placeholder in the output config.