When opening a local HTML file, how do I ensure I get the content not a cached version?

Question

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?

Answer 1

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.)