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?

回答1:

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

回答2:

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

回答3:

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

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

回答4:

You can specify IIS from the specific sites advanced settings that preloading is not enabled. Your site performance will however suffer. Also check that the application pool for the specific website has integrated pipeline mode on and .NET CLR version.

来源：https://stackoverflow.com/questions/34851243/how-to-make-index-html-not-to-cache-when-the-site-contents-are-changes-in-angula

标签

html

angularjs

caching

deployment