60

I have a webpage index.html hosted on a particular server. I have pointed example.com to example.com/index.html. So when I make changes in index.html and save it, and then try to open example.com, the changes are not reflected. Reason that the webpages are being cached.

Then I manually refresh the page and since it loads the fresh copies and not from cache, it works fine. But I cannot ask my client to do so, and they want everything to be perfect. So my question is that is there a trick or technique as to how I can make the file load every time from the server and not from cache?

P.S: I know the trick for CSS, JS and images files, i.e. appending ?v=1 but don't know how to do it for index.html.

Any help would be appreciated. Thanks!

Pulkit Mittal
  • 5,916
  • 5
  • 21
  • 28

8 Answers8

61

by this: 

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

Setting the content to "0" tells the browsers to always load the page from the web server.

doniyor
  • 36,596
  • 57
  • 175
  • 260
  • I also have this and still under some conditions unclear to me on some systems I'm still seeing a cached version served. Is this sufficient to always ensure that the index.html will not be cached or are there some server-side settings required as well ? – ddewaele Aug 13 '14 at 05:45
  • I think the old cached version need to expire first. – Victor Queiroz Mar 20 '17 at 10:05
  • 3
    Consider folding common sense into the solution. Serve and cache the file and replace the cached version if the file is modified. Consider that it costs very little to check a modification date. You solution is akin to unplugging a network cable to solve a network security problem. – Rick O'Shea May 25 '17 at 23:19
  • 3
    @RickO'Shea, with that said, however, doniyor answered the question right on the nuts. A separate question is whether or not it is ever reasonable to prevent typical caching strategies. – karns Jan 22 '18 at 18:54
10

The meta tags didn't worked for me so. i set the headers from the java class that implements filter or controller. and it worked. here is the code

HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1
httpResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
httpResponse.setDateHeader("Expires", 0); // Proxies.
Tom Tanner
  • 9,244
  • 3
  • 33
  • 61
user3979672
  • 101
  • 1
  • 3
6

There are only two most reliable way available as of 2018

1) **<meta http-equiv="expires" content="0">** Use this meta tag but be careful because this tag destroy the all cache of the page as soon as a web page processed by browser.

2) Generate an unique ID at server for each page request and append this id at the end of the all file name inside the HTML document with ? before the unique id append on images, documents, css/js files, videos etc which need to be load from the server every time. For example if you have the HTML tag like <img src="images/profile223.jpg" alt="profile picture"> then on server side append the unique id at the end of the file name like this echo '<img src="images/profile223.jpg?'.$uniqueid.'"" alt="profile picture">'; . In this example i use php but you can generate the unique ID on any language. All big companies like Google, Facebook, Microsoft, Twitter etc. uses this technique because it is most effective way and does not effect the cache data you want to store on user browser like login session id. This technique is cross browser compatible and support older version of IE, Firefox, Chrome, Safari and Opera. You may append the unique id at the end of the url using the same technique

Sam
  • 122
  • 1
  • 2
  • 19
    But if index.html is cached, then the client would have the old URL for static assets with the previous ?uniqueId appended – Josh J Jun 12 '18 at 15:19
3

You can try this below method. It worked for me.

Please add the below lines of code in your .htaccess file.

<IfModule mod_headers.c>

    <FilesMatch "\.(html|php)$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </FilesMatch>

    <FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
        Header set Cache-Control "max-age=172800, public, must-revalidate"
    </FilesMatch>

</IfModule>

If you use the above code, browser will not cache .html files.

Murali Krishna Bellamkonda
  • 407
  • 5
  • 16
2

Adding this meta tags to the header works for most of the browsers (in that case index.html will not be cached): 

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

A bit late but it might help someone else!

Patrik Bego
  • 4,009
  • 1
  • 26
  • 24
1

You can send extra headers with the file to tell the client (the browser, that is) that the file must not be cached. If you got Apache, take a look at mod_expires. If you use a server side scripting language, like PHP, you can solve it using that too.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • I'm not sure about the server. My webapp is hosted on a completely different sever (AWS EC2) while the index.html page, I'm just given authorization to change the content, don't know which server it is using, etc. But as Doniyor suggested, meta tag did the trick. Thanks for your time :) – Pulkit Mittal Nov 10 '12 at 10:58
1

i ever meet this problem with my website. in your URL add the q=''

http://yoururl.com/somelinks?q=fill_with_random_number

for me, it works

ahr
  • 67
  • 7
  • i don't know for sure, but i think because the browser will treat it as a new url, so it won't use the url cached before. – ahr Jun 09 '17 at 02:18
  • Adding the random string after a question mark is called 'salting' the URL. What ahr said is correct. The both the server and browser treat it as a new url (because it's unique), so it bypasses both caches. The question mark in the url tells the browser and server that you're sending GET variables to the server. After the '?', you can put any text you want to send, and create a unique url every time. Since the url is unique, there will be no cached record of it in the server or browser caches. When there's no record, the server is forced to serve up the latest version of the page. – craig Mar 15 '18 at 14:32
  • Also to note - it doesn't have to be 'q' and a random number. it can be '?1234' or '?h=asbad'. If you already have a question mark in your url, then use an ampersand instead. For example, 'http://example.com/?x=1' could change to 'http://example.com/?x=1&123459asx', where '&123459asx' is the random string I passed. – craig Mar 15 '18 at 14:34
1

I highly recommend not using meta tags and use htaccess as Murali Krishna Bellamkonda posted. That will always be the best and most secure dependable way. You can fine tune your whole system to stay cached for long times, refresh files at specific times, etc... Go ahead and try all them meta tags at once, and see what happens! (no I wouldnt) Look into Header set Cache-Control "max-age=5, immutable" with ExpiresDefault A5 for a no cache option.

Len Atkinson Jr.
  • 69
  • 1