I generally work with WordPress but just completed a project for a client that was a static HTML page consisting of 8 pages and ~2 images per page. Working with WordPress I would either use w3 total cachce, cloudflare, photon or a solution through wp engine.
I've been doing research and found a few solutions regarding meta tags, and manipulating an .htaccess file. The meta tag route, I read, is not a reasonable solution as it does not validate properly with HTML5. (this was specifically referring to setting up no cache, but same idea)
<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" />
Reference here: Using <meta> tags to turn off caching in all browsers?
I also read a little bit here:
http://www.metatags.info/meta_http_equiv_cache_control
Using something like this:
<meta http-equiv="Cache-control" content="public">
<meta http-equiv="Cache-control" content="private">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-control" content="no-store">
But I'm not sure how they actually work and which is the correct one. Can someone point me in the right direction? Thanks!
Step away from the <meta> tags. Default caching headers sent by the web server are, in most cases, already appropriate for a static web site. Unless you have some unusual requirements - which does not appear to be the case here - there should be no need to modify them.
Related
When my server renders index.html, it injects some cache busting witchcraft there so that scripts are forced to reload if the version changes. If I do nothing, mobile Chrome wont even bother to ask if there is a new version of index.html.
If I add the following to the rendered index.html
<!-- never cache this locally -->
<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" />
It does fetch / again but as an unwanted side effect it also caches none of the scripts even though the version number stays the same.
This did the trick.
<meta http-equiv="expires" content="0" />
As did the previous answer that was deleted, I just had disable cache on in the devtools.
I have the following code on my (all html webpages) :
<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" />
However, this is not clearing up caches and my code updates are not showing up. Is there another way to accomplish cache refresh?
It is better to use standard HTTP headers to control the caching from the server side, rather than using the http-equiv meta tags in your HTML. It allows for controlling proxy caching and other intermediaries, making it a lot more effective. The meta tags also don't help if you have external CSS and JS files. These will still be cached, which may explain why it isn't working correctly for you. You would have to append a randomly generated query string to your resource paths so that the browser appears to be loading a brand new resource every time.
The http-equiv values above are actually not in the HTML 5 specification, so are not valid. You can read more on using HTTP headers correctly in this useful caching guide.
Is it possible to prevent caching files in Google Chrome programmatically?
I'd like to achieve the same effect as the option "disable cache" in chrome developer tools.
Main problem is that I'm using external script (it can't be changed by me) which loads another script - putting additional (randomly generated) parameters into source url for that script won't help.
So far I've tried to use meta tags:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
After testing with different combinations of that tags I can only say that Google Chrome ignores that at all.
Is there any option to do that?
Thanks in advance.
You could try to use the HTTP response headers, instead of HTML meta tags: see Disabling browser caching for all browsers from ASP.NET.
If you're asking about disabling the caching of data in input elements, see How to prevent google chrome from caching my inputs, esp hidden ones when user click back?
For security reasons, we don't want someone's submitted info to be stored. For instance, after coming to a page via a form submit, when I refresh, it asks if I want to send that same data again (at least in Chrome).
We're attempting to create a session-ish behavior. We're not maintaining a server session - after log in, the user gets a single page returned. Since there are no other pages for the user to navigate to once logged in (no server calls at all) it seemed simpler to handle it this way. However, refreshing the page allows the data to be resubmitted, we don't want that. You can also click the back button, then the forward button, and the page is still there, or go on to other sites, and back-button back to the page.
I found <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"> but it doesn't seem to be having any effect.
Javascript solutions are acceptable, as javascript is required (not by me, don't shoot the messenger) for access.
Thanks!
In order to insure that the page wont cache you need to place another set of 'HEAD' tags at the bottom of the document aswell.
For example:
<HTML>
<HEAD>
<TITLE>No Cache</TITLE>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
<BODY>
...
</BODY>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</HTML>
source
-- or --
<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" />
The specified date should be a date in the past so that the browser will immediately discard the cached copy or not cache it at all.
I have a page with another html page in iframe. In this iframe, i put this header tag
<META http-equiv="Pragma" content="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="cache-control" content="no-cache" />
But chrome still cache it, when iframe content changed, hit f5 button but chrome still load cached version, not new version.
Please tell me how to pevent google chrome cache this iframe.
Set the correct expiry headers in the HTTP response from your server. They override anything you've put in meta tags.
This works in Chrome:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
I found this in a Chromium bug.
https://bugs.chromium.org/p/chromium/issues/detail?id=28035
Meta tags can be ignored. Instead of them your server should set appropriate HTTP headers for cache control. You should also set the Expired header.
https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Avoiding_caching
I found that Chrome may ignore those meta settings in the file in favor of the cache settings in http response header. I was able to fix this issue in IIS by adding this in my web.config
<system.webServer>
<staticContent>
<clientCache cacheControlMode="NoControl" />
Files still get cached but now I can explicitly exclude a file if I need to.