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.
Related
My application presents image files to the user (for photographic competition judging). It may present several thousand quite large files during a single session.
To present each image, I obtain a URL via a webservice using AJAX and then cause it to be displayed with
$("#imgImage").prop('src', resp.URL);
I am concerned about the storage usage within the user's browser. Will each image be added to the cache and if so, how can I prevent it?
I have the meta directives
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Expires" content="-1" />
but as the page itself is not reloaded each time, I'm not sure if they are effective.
You need to have the server send those headers with the HTTP response providing the images. In your page, they only apply to your page, not the images.
Beware that if your page ever shows the same image again (can the user go back? I'd want to be able to), the client will have to re-download it. If it's large, or they're on a metered connection, that may not be ideal.
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'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).
Why use meta tag "Pragma" and "Expires" in head section of html like this.
Thanks.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
Using this will disable the browser to cache your webpage.
Disabling cache has some valuable advantages.
Like when you update your files on the server, if happened that the browser doesnt have a cached copy of your webpage then it would force itself to load the updated content of your website.
One of the disadvantage of this is the impact on page downloading. Since you dont have cached copy on your browser, it will always download all of your assets from the server thus affecting time and also consuming bandwidth.
Try reading this article.
Both tags are meant to prevent browsers from caching the HTML page, and they usually do that. This means that access to the page may be slower especially if it is frequently visited. Probably most commonly, these tags are inserted by people who do not understand how caches work. See Caching Tutorial for Web Authors and Webmasters.
There are several ways to try to prevent caching. These specific tags have no official definition, and they do not conform to HTML5 CR.
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">