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.
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.
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 have a webpage index.html hosted on a particular server. I have pointed example.com to example.com/index.html. So when I make changes in index.html and save it, and then try to open example.com, the changes are not reflected. Reason that the webpages are being cached.
Then I manually refresh the page and since it loads the fresh copies and not from cache, it works fine. But I cannot ask my client to do so, and they want everything to be perfect. So my question is that is there a trick or technique as to how I can make the file load every time from the server and not from cache?
P.S: I know the trick for CSS, JS and images files, i.e. appending ?v=1 but don't know how to do it for index.html.
Any help would be appreciated. Thanks!
by this:
<meta http-equiv="expires" content="0">
Setting the content to "0" tells the browsers to always load the page from the web server.
The meta tags didn't worked for me so. i set the headers from the java class that implements filter or controller. and it worked. here is the code
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1
httpResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
httpResponse.setDateHeader("Expires", 0); // Proxies.
There are only two most reliable way available as of 2018
1) **<meta http-equiv="expires" content="0">** Use this meta tag but be careful because this tag destroy the all cache of the page as soon as a web page processed by browser.
2) Generate an unique ID at server for each page request and append this id at the end of the all file name inside the HTML document with ? before the unique id append on images, documents, css/js files, videos etc which need to be load from the server every time. For example if you have the HTML tag like <img src="images/profile223.jpg" alt="profile picture"> then on server side append the unique id at the end of the file name like this echo '<img src="images/profile223.jpg?'.$uniqueid.'"" alt="profile picture">'; . In this example i use php but you can generate the unique ID on any language. All big companies like Google, Facebook, Microsoft, Twitter etc. uses this technique because it is most effective way and does not effect the cache data you want to store on user browser like login session id. This technique is cross browser compatible and support older version of IE, Firefox, Chrome, Safari and Opera. You may append the unique id at the end of the url using the same technique
You can try this below method. It worked for me.
Please add the below lines of code in your .htaccess file.
<IfModule mod_headers.c>
<FilesMatch "\.(html|php)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>
<FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
</IfModule>
If you use the above code, browser will not cache .html files.
Adding this meta tags to the header works for most of the browsers (in that case index.html will not be cached):
<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" />
A bit late but it might help someone else!
You can send extra headers with the file to tell the client (the browser, that is) that the file must not be cached. If you got Apache, take a look at mod_expires. If you use a server side scripting language, like PHP, you can solve it using that too.
i ever meet this problem with my website. in your URL add the q=''
http://yoururl.com/somelinks?q=fill_with_random_number
for me, it works
I highly recommend not using meta tags and use htaccess as Murali Krishna Bellamkonda posted. That will always be the best and most secure dependable way. You can fine tune your whole system to stay cached for long times, refresh files at specific times, etc...
Go ahead and try all them meta tags at once, and see what happens! (no I wouldnt)
Look into Header set Cache-Control "max-age=5, immutable" with ExpiresDefault A5 for a no cache option.
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.