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

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?

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

As mentioned in the comments it's really the server configuration you want to be looking at but you haven't mentioned your setup. We run our AngularJS site with a .NET backend using IIS.

We update our site regularly and have had issues in the past with JS and CSS resources caching but we've solved it through the following settings:

Build

We use gulp to build our AngularJS application and as part of that we append a version number to the querystring of our main application CSS and Javascript files that change frequently. For example:

<link href="css/default.min.css?v=2" rel="stylesheet" />

Server Configuration

In the root web.config we specify that we don't want to the index.html to cache by setting the cache-control, Pragma and Expires request headers as well as the max-age to 0.

<location path="index.html">
<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
  </staticContent>
    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>  
</system.webServer>
</location>

References:

IIS Client Cache: https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache
Cache-Control HTTP Header : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
Pragma HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma
Expires HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires

By setting content value to 0, browsers will always load the page from the web server.

<meta http-equiv="expires" content="0">

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

Related

Recent Posts