How to burst yeoman index.html cache

Question

When I deploy a new version of my Angular app, the old version still persist. Only, the workaround which is fixing is a "hard" refresh on the browser. (This is not an acceptable solution).

I am using Yeoman (generator-angular) for my project. I looked at the Gruntfile.js and see that it executes a task that renames everything during build including images, js, css. Only file that is not being renamed is index.html. What can I do to index.html so that browser will load this file instead of using the cached version?

Answer 1

You can modify in your server config to tell browsers to not cache by setting Cache and Expires header for response. I'm giving you an example of Nginx:

location / {
    index index.html
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-cache, no-store, must-revalidate"
}

Here we are responding index.html with headers which will prevent browsers from caching the index.html and the browsers will always get the fresh copy. Now, Grunt is already renaming the JS and CSS files based on the content then it will be refreshed automatically.

Of course, above example is for Nginx configuration. You can achieve it for your web server.