How to make index.html not to cache when the site contents are changes in AngularJS website?

Issue

Normally for .js and .css file we will append a version during build like xx.js?v=123, and then after website deploy, we can get the new version of js and CSS. But I don't see a place talking about how to make the index.html file upgrade when website deployment happen. And we do see in IE that the HTML content should have been changed but it still use the old HTML content.

One solution I find from google is to

<meta http-equiv="Cache-control" content="no-cache">

However, I am not sure whether this is the best solution?

Solution

Yes, that is the correct way. You have to set the Cache-Control header to let the browsers know that they don't have to cache any content for that request.

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

(Pragma & Cache-Control is one and the same thing but from the different HTTP specification. See the answer here: Difference between Pragma and Cache-control headers?)

See one of the related answer here: How to burst yeoman index.html cache

Answered By - Shashank Agrawal