How to prevent html5 page from caching?

Question

I converted a plain vanilla HTML page to HMTL5/CSS3 with a responsive layout, and for security reasons (dictated by the security people) the page must never cache.

The page previously used <meta http-equiv="Pragma" content="no-cache"> and <meta http-equiv="Expires" content="-1"> to prevent the page from being cached.

What replaces this in HTML5? How do you prevent an html page from caching in the client?

I've spent a week reading about manifest files, but they seem to do exactly opposite of what I want as attaching a manifest file explicitly causes the page it is attached to to cache.

And please don't refer me back to the w3c definition of which meta elements are now allowed — I understand that HTML5 does not include the cache-control or Pragma in meta elements.

I need to know what it does include that will prevent a page from being cached.

Well you could use actual http headers instead of the fake html ones. mnot.net/cache_docs — Patrick James McDougle
– Patrick James McDougle, Commented Mar 5, 2013 at 16:23

Alexander Taylor · Accepted Answer · 2015-01-06 23:44:44Z

36

In the beginning of code you need to use this:

<!DOCTYPE html>
<html manifest="manifest.appcache">
...

Then create manifest.appcache with such content:

CACHE MANIFEST

# Cache manifest version 1.0

# no cache

NETWORK:
*

edited Jan 6, 2015 at 23:44

Alexander Taylor

17.8k15 gold badges72 silver badges85 bronze badges

answered Mar 5, 2013 at 16:24

n1ckolas

4,4503 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jason N. Gaylord Over a year ago

And to add to @n1ckolas answer, check out w3.org/TR/html5/browsers.html#manifests for specifics.

gps03 Over a year ago

Thanks, that work to prevent the file from caching, but now it pops up a info bar in Firefox stating: "This web site is asking to store data on your computer for offline use." Which again is exactly the opposite of what I want to happen. Very annoying and will not be too user friendly for our novice users -- we cater to healthcare professionals who are less than Internet savvy. Anyway to keep the manifest and ditch the info bar or is this just the way it is with firefox?

n1ckolas Over a year ago

I'm not actually sure... You can move it into separate question, I'd glad to see the answer :)

Alexander Taylor Over a year ago

an equivalent solution is to reference a manifest file that doesn't exist: <html manifest="/doesnt-exist.appcache"> but this will show up in the console in chrome developer tools.

Raj Parmar Over a year ago

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. developer.mozilla.org/en-US/docs/Web/HTML/…

|

Dan Doyon · Accepted Answer · 2013-07-04 02:42:50Z

5

I dislike appcache a tremendous amount. It almost works well but can be a real unforgiving pain. While doing some code refactoring, I realized that after logout, i could browse back to the the last page. Of course, refreshing browser it would force user back to login but this is not desired.

After searching around and seeing the options, I started to get a bit frustrated. I do not want to use appcache. I then realized that my code was redirecting to login page after destroying the session and got an idea, what if, I redirect to the home page instead? And voila, page was loaded, session checked (and of course not there), user redirected to login. Problem solved.

answered Jul 4, 2013 at 2:42

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

Comments

joern · Accepted Answer · 2015-09-25 06:02:44Z

5

I have been struggling with the same issue for quite some time. What works for me - at least so far - in Chrome, FF and IE is doing the following:

1) reference the manifest file <html lang="nl" manifest="filename.appcache"> From what I understand, this will cache everything that follows in this HTML document, hence a manifest file is needed to prevent this from happening:

2) use a manifest file filename.appcache with the following content which basically says: for all files, do not read from cache but from network server:

CACHE MANIFEST
# 2015-09-25 time 20:33 UTC v 1.01 
NETWORK:
*

3) a third step is required: each time you upload a (partial) update of your website, also change the manifest file by changing the date and time stamp in the comment(#) line. Why? Because if you do not change the manifest file, it will not be read and it will default to step 1 and thus cache and read from cache. The fact that the manifest file is changed, however, enforces the manifest file to be read again, and thus enforces that the "do not read from cache but read from network server" instruction therein, is applied again.

edited Sep 25, 2015 at 6:02

joern

27.7k7 gold badges94 silver badges107 bronze badges

answered Sep 25, 2015 at 4:26

Gladys

511 silver badge1 bronze badge

1 Comment

Totor Over a year ago

Beware, this Cache Manifest feature has been removed from the Web standards.

Community · Accepted Answer · 2017-05-23 10:31:26Z

The previous answer may not consistently work to prevent caching or to clear existing cache in chrome but there is a work around.

1) To clear existing cache in chrome, it may be necessary to update all files of the website (eg by linking to a new css file on every page) along with an update of the cache-manifest before existing cache in chrome gets cleared upon the second visit of a page (because of the "flow" of the way in which a page is rendered: the first time a page is visited, the browser reads and caches the manifest , while proceeding with loading from existing cache. Only upon the second visit will the newly stored updated manifest be read and applied).

2) and if none of that helps, it is possible to include a script in the manifest file itself to check for a new manifest and if found, reload it and use the new manifest. This did the trick and resolved all remaining cases I tested for where files had remained persistently cached in chrome. I found this script on this page by Jason Stimpel.

<script type="text/javascript">
window.addEventListener('load', function (e) {
window.applicationCache.addEventListener('updateready', function (e) {
        window.location.reload();
    }, false);
}, false);
</script>

Collectives™ on Stack Overflow

How to prevent html5 page from caching?

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related