I'm not really familiar with all the meta allowing you to manage the cache client-side so i tried to make a simple example with the HTTP header "expires"
With the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="expires" content="mon, 18 Jul 2016 1:00:00 GMT" />
<title>MY TITLE</title>
</head>
<body>
MY BODY
</body>
</html>
When i load the page for the first time (cache cleared before). the page is saved in the cache but when i update my body with "MY BODY2" and reload the page, the page displays "MY BODY 2". The browser was supposed to take the page from cache (with "MY BODY") since the expiration is in july 2016, no ?
Thank you for helping me to put some light on this problem
It depends how you reload the page.
You've basically three options:
Browse to another page and then back. This should use the cache.
Press F5 or reload but. This is an explicit reload so will check with the server if there's a new version - even if it's cached - and download it if there's a newer version.
Force reload (Ctrl+F5 in some browsers). This says ignore the cache and download from scratch (even if the cached version appears to be the same as what server will send you).
I suspect you've done option 2 and didn't realise this would check with the server and assumed it would use the cache if still valid. The reason it actually checks with the server is that a reload is often done when the user suspects the content has changed, or wants to re-download it (e.g. If page didn't render properly).
Also it should be noted that meta headers in HTML are not as good as http response headers set up by the server for various reasons including browser support reasons.
And finally it's worth opening developer tools (F12 in Chrome for example) and checking network tab to see what's going on but in that case make sure you don't have "Disable cache" ticked when it's open (it's ticked by default in Chrome as most developers don't want to use a cache when developing).
Related
I have a web application published on IIS. All of my JS files are called from my static html file called "Index.html". In that html file, I call each JS file with the <script> tag, and in order to manage our versions and perform updates without user's history and cache deleting, I've added the ?v={version} at the end of each JS file's URL as the following:
<script src="./app.js?v=20161226.1" />
After multiple version updates, I've noticed that the users still need to refresh the page in order to get the latest Index.html file. After searching the Developer Tools of chrome, and looking in the Network section in the Developer Tools, I've managed to notice that the Index.html file is loaded from the cache (shown the "(from cache)" sign in the Network).
After searching the web for any solution for uncaching .html files (Because there is no ?v={version} for my .html file), I've found that adding:
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
isn't solving the issue and the my Index.html file is still loaded from the cache.
I'm updaing my web application each two weeks and I can't afford myself letting the users deleting the cache and history each version update because the new and latest .html file is loaded because it is cached.
The only thing that helps is refreshing (F5) and then the Index.html file is reloaded (Not loaded from cache and the latest version of that Index.html file is shown). But if someone types the url and enters it in the URL-bar, the Index.html is still loaded from the cache.
Is there anything I've done wrong and should add anything else?
Is there anything to do to solve this issue at all?
Thanks!
Putting a query string on the end of a URL is a (good) hack to allow you to set the HTTP cache control headers to cache for a long time for infrequently changed resources and still force the new version to load on those occasions that you do change it.
If you are frequently updating your HTML, then just set the cache control headers to tell the browser to check for updates more frequently. Take advantage of Etags or If-Modified-Since instead of depending on an Expires header set far in the future.
NB: You have to use real HTTP headers. <meta http-equiv> is a bad joke.
I need to disable caching for single files in all browsers.
I have a website that generates small video clips. There is a preview stage where the results can be watched.
An mp4 called preview.mp4 is displayed. When the user goes back, edits the video and wants to preview it again, the old preview.mp4 is being displayed even though the file on the server is changed.
How can I prevent the caching of this video file? Or what are the other ways to fix it?
Note: it's a single page application so I don't reload any HTML files. Only PHP content. Hence the headers I set, are not useful in this scenario:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="cache-control" content="no-store" />
Thanks.
It's not the web page itself you should be concerned about, but the mp4 file which is downloaded and cached separately.
Ensure the response headers of the mp4 file prevent browser caching.
Cache-Control: no-cache
Hence the headers I set, are not useful in this scenario:
<meta http-equiv="cache-control" content="no-store" />
There problem here is that those are not headers.
They are HTML elements (which are part of the HTML document, which is the body of the HTTP response) which attempt to be equivalent to HTTP headers … and fail.
You need to set real HTTP headers, and you need to send them with the video file (rather than the HTML document).
The specifics of how you do that will depend on the HTTP server you use.
Further reading:
Caching in the HTTP specification
Caching Tutorial for Web Authors and Webmasters
Caching Guide in the Apache HTTPD manual
How to Modify the Cache-Control HTTP Header When You Use IIS
Try adding a cache key
preview.mp4?cachekey=randNum
Where randNum can be a timestamp or you use a random number generator to generate randNum.
I recently took over updating a website. When I tried to change the homepage, I found that the domain.com/index.html was updated appropriately, but that domain.com itself still showed the old version of the page. After some time, and without me changing anything, eventually domain.com started showing the new version of the page.
My initial idea was that this had to do with my browser caching the old homepage, but after doing some Googling I learned that browsers should check for updates (at least by default) before loading any cached paged.
Does anyone know why this occurred?
Webpage caching is of general behavior in most browsers unless changed by the user,
the following code will always make a new request and ignore any stored cache of the defined Webpage
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Place that inside your <head></head>, also just to note this doesn't always work in all versions of IE since the page hasn't filled the 64K buffer on load before the Pragma comes into play, thus meaning the page becomes cached, to ensure non-caching you can simply add another line
<META HTTP-EQUIV="Expires" CONTENT="-1">
I seem to have the opposite problem from most SO users. I have a static page that changes rarely, and I want the browser not to reload that page when the user navigates back to it quickly. I have not been able to find any simple list of rules that detail when a browser reloads on back-navigation, and when it does not.
If it makes a difference, my URL has a query string, and is served using the https:// protocol.
You don't need to know if the back button has been used. Just tell the browser to cache your page by using cache control headers. You will see lots of examples from Google - http cache control headers
Specifically, look at these meta tags:
<meta http-equiv="CACHE-CONTROL" content="..." />
<meta http-equiv="EXPIRES" content="..." />
Edit:
Here is a link to one of the results from that Google search. I think it gives a pretty good explanation of how these headers work. Increasing Application Performance with HTTP Cache Headers
With these headers you can specify how long to cache your pages; 10 minutes, 30 minutes, hours, days, etc.
Have you tried onpageshow event of the body tag ?
<script type="text/javascript">
function caller()
{
return false;
}
</script>
</head>
<body onpageshow="caller();">
</body>
Works on most cases.
We just rolled out a completely new website, with a lot of the old images gone. We have been swamped by called from clients this morning because they can't get access to the sites content because they are still using cache on the page. Is there a way using the meta tags or something that will force them not to use the cache content? This will just be temporary for a week, then we will remove it, just so our users have the latest site up. Thanks.
Why not change the HTML source to show a different URL to the images and resources so the browser is forced to download a new version. This technique is used a lot to invalidate the browsers cache. Here is an example:
<img src="/logo.jpg?version=1">
<link rel="stylesheet" type="text/css" href="/style.css?version=1">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
Indicates cached information should not be used and instead requests should be forwarded to the origin server.