Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have an issue where the newest content of a local HTML file is sometimes not displayed. Instead, the browser shows a cached version. The workaround is to press <Ctrl>+<F5> but I'd like to resolve this programmatically.

Specifically, I download an HTML file and open it in my browser. Later I download a newer version of the file (with the same file name). The newer file has different content but some browsers, sometimes still show the old content from the cache. I'm having trouble consistently reproducing the error but when it occurs it's very irritating.

I've found two possible solutions but because of the difficulty reproducing the error, I can't confirm that either of them are correct.

One possible solution is the following Javascript:

<script type="text/javascript">
window.location.reload(true);
</script>

Another is the following metatags:

<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

Is it this simple? If so, does it work for Ch, IE & FF?

Is there a totally different solution that I've missed?

share|improve this question
1  
Do you have ownership over the file you download? Because if you are downloading it from a 3rd-party, won't you overwrite any no-cache metatags? And updating the source of the downloaded file each time seems like a lot of effort. –  Ciaran Aug 17 '11 at 14:23
    
I am producing these files. Customers are downloading them and finding that even when the new file has overwritten the old file, their browser (occasionally) displays the content of the old file. –  user12824 Aug 18 '11 at 21:17
add comment

1 Answer

up vote 5 down vote accepted

To ensure content isn't cached, use no-store and must-revalidate in addition to the attributes you suggest. i.e.:

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

An explanation of those terms, from Mark Nottingham's Caching Tutorial (also see the official spec):

  • no-cache — forces caches to submit the request to the origin server for validation before releasing a cached copy, every time. This is useful to assure that authentication is respected (in combination with public), or to maintain rigid freshness, without sacrificing all of the benefits of caching.
  • no-store — instructs caches not to keep a copy of the representation under any conditions.
  • must-revalidate — tells caches that they must obey any freshness information you give them about a representation. HTTP allows caches to serve stale representations under special conditions; by specifying this header, you’re telling the cache that you want it to strictly follow your rules.

Reading these descriptions, you might think that including 'no-store' alone might be enough, but it's best to use all three in cases where you hope to ensure that no caching at all takes place.

You can simply set the Expires header to '0' to denote that it has expired. You need not use a full date and time.

The Pragma header is not used by modern (HTTP/1.1) caches, but W3C recommend that you include both Cache-Control and Pragma because older (HTTP/1.0) caching mechanisms don't support Cache-Control.

It's better to attempt to control caching with headers, and the above should work for all browsers. (The JavaScript you posted reloads the page, but this alone will not necessarily force a fresh copy of the content to be fetched.)

share|improve this answer
    
Fantastically detailed answer. Thanks so much. –  user12824 Aug 18 '11 at 21:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.