I'm using a web page builder that I've purchased and I've modified it to make it run on a web server instead of a local computer. The way the page builder stores the data is by using LocalStorage.
Im writing all localstorage data to a database and on load I clear browser localstorage with "window.localStorage.clear();" then I write new localstorage using the data saved before.
In general this works but I'm having some difficulties forcing the browser to display the latest content but it will eventually show after a few refreshes.
I found this code to put in .htaccess:
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
and I'm using these meta tags:
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
It seems like this did the trick in Chrome but firefox is still not showing the correct content.
Locally the code works great, the problem appeared after uploading it to a web server.
Any suggestions?
Thanks in advance
Related
I have been struggling with this problem when my site loads from cache when I(and the users) load it. I added these meta tags to my html to prevent this:
<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="pragma" content="no-cache" />
But it did not work. Then I added these to the .htaccess file:
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
It did not work either.
I added a ?Version= with a random number to my links, it won't work either.
I even disabled the website loading from cache in the browser, but it still loads from cache.
What can I do to finally stop the website from loading from the cache? Some browsers display it correctly for me(firefox for example) but Opera, which i use the most won't.
EDIT: It seems like it smashes more versions together. For example i tested it: when I change a text it changes but, some colors for example won't change.
You should try looking into the browser's settings. Seems like they're the main reason for your trouble (since some browsers display it correctly and some do not)
I'm trying to prevent caching of confidential files on the browser(chrome), so every time a request is made, fetch the files from the server, instead of viewing from cache. I added the following html meta tags, to instruct the chrome browser to not cache, but with no luck.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
upon inspecting the network traffic, cache-control is set to max-age=0 on request. and private on response.
I have this working for IE though.
Normally you would rather do this in the .htacces file, based on filetype (or any other pattern), example:
<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\.(js|css)$">
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</FilesMatch>
</IfModule>
Replace my simple example with a pattern of your choice. Also for reference here is more detail information on this topic: http://www.askapache.com/htaccess/using-http-headers-with-htaccess.html
I have an HTML document that is on a local server (not a webserver, if that's important). Sometimes, after updating some files, I go to visit the HTML document and it is not updated. However, if I try to refresh the page, the content then updates.
I'm not sure why this is occurring considering that I am opening the page anyway after update, so it should have the latest values then.
The issue is that browser is caching the HTML document it self. It is fine for static pages, where data remains constant
but as you stated that content of the page is dynamic, you can do 2 things
Add expiration header for document via server side code. This ensures that when ever user tries to access your page, the browser always sends a request to server and ignores local cache. Some of the headers you need to set
Cache-Control : no-cache, no-store, must-revalidate
Expires : -1
Pragma : no-cache
Add expiration via meta tags
<meta http-equiv="expires" content="Fri,31 Dec 2010 11:59:59 GMT" />
<meta http-equiv="cache-control" content="no-cache">
This should be kept under <head> tag
I have a web development question.
Sometimes, if I place a new version of a webpage on a webserver, and I browse to this webpage, the new page is not shown. Instead the old page is shown, from the cached page from a previous browse to the webpage.
How can I get the new page to always be shown? Is there a tag of some sort that I can use for this?
There are some tags you can use
See http://www.i18nguy.com/markup/metatags.html
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
There are similar HTTP headers that the web server can set as well.
Yes, you can specify no caching and how long to cache individual files in .htaccess if you are using Apache. Typically you would disable caching on dynamic content and set caching limits to the usual update rate of images and static html. On my site I regenerate the static html every day so have set caching to 24 hours on .html and disabled caching on PHP scripts (these limits are specified in seconds - 1 day = 86,400 seconds):
# Set up caching on media files for 1 week
<FilesMatch "\.(gif|jpg|jpeg|png|js|css)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
# Set up 1 Day caching on site generated files
<FilesMatch "\.(xml|txt|html)$">
ExpiresDefault A86400
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
# Force no caching for dynamic php
<FilesMatch "\.php$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
If you are just having problems testing changes to your html files, remember that you can usually force a browser to reload the page regardless of cache settings - [Ctrl][F5] under Windows.
I think the server still haven't update the site. Just wait and see if it updates.
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.