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

Question

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?

score 112 · Accepted Answer · edited May 23 '17 at 12:34

112

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

edited May 23 '17 at 12:34

Community

1
1

answered Jan 18 '16 at 09:40

Shashank Agrawal

25,161
11
89
121

1

How is breaking the crucial functionality of caching an "answer" to a mis-configured web-server? – Rick O'Shea Jun 10 '17 at 01:34
42

@RickO'Shea I didn't get you? Can you please explain, what is entirely wrong? The author asked for bursting cache of `index.html` so I answered accordingly and if you want to add `no-cache` header for png files, one will have to configure the server for example, Apache or Nginx. I know this header can also be directly added via server configuration but I replied based on the question. – Shashank Agrawal Jun 10 '17 at 08:27
6

@RickO'Shea Does this disables caching for js and css files too? These files are big and are always needed to be cached . – rostamiani Feb 12 '20 at 06:48
12

will this solution break caching for the other assets or just index.html? – Omar Jun 29 '20 at 16:26
Both solutions on this page should include Cache-control max-age=0 which according to mozilla, is needed by proxies using HTTP/1.0. Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#up-to-date_contents_always – whittet Jan 04 '22 at 17:32
Thanks, @whittet. I intentionally didn't add that part as no-cache was working for major browser at the time of writing the answers. – Shashank Agrawal Jan 05 '22 at 07:55
`Pragma` is deprecated and no longer recommended: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma – Barnee Sep 15 '22 at 09:38

score 22 · Answer 2 · answered Dec 01 '17 at 12:22

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://learn.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

Nikhil Mahirrao · Answer 3 · 2020-04-30T04:36:20.823

8

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

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

edited Apr 30 '20 at 04:36

answered Mar 28 '18 at 06:57

Nikhil Mahirrao

3,547
1
25
20

where should i set above mentioned code, index.html? – user2240097 Sep 08 '20 at 04:44
You can put it in the head of index.html file https://www.w3schools.com/tags/tag_meta.asp – Nikhil Mahirrao Sep 08 '20 at 04:55
1

`Expires` and `Pragma` is deprecated and used for HTTP/1.0. Since many years ago, it is no longer needed. – hastrb Mar 03 '21 at 05:06

score 1 · Answer 4 · answered Jul 31 '18 at 08:59

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.

score 0 · Answer 5 · answered Aug 24 '22 at 16:05

0

Just add this to nginx file:

 location ~ \.html$ {
    add_header Cache-Control no-store;
 }

answered Aug 24 '22 at 16:05

Andrey Radkevich

3,012
5
25
57

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

5 Answers5

Linked