I have a web page of which most of the assets have changed recently. But when I load the page for the first time, it shows the old images, yet if I refresh the page, it loads the new ones.
So please tell me how to load the new images directly from the server when I open the page for the first time.
I suspect this has something to do with caching?
If you include a query string after the image name, and increment the value each release, this will make the browser download the new asset.
E.g.
http://www.example.com/image1.jpg?v=1 - on first release
http://www.example.com/image1.jpg?v=2 - on the next release
This also works for stylesheets, JS and other external resources.
<FilesMatch "\.(png|jpg)$">
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>
Put that in the .htaccess file.
Related
I want to cache all files as they don't change but not cache the main index.html page. My current htaccess:
<FilesMatch "\.(png|ttf|js|css|ico|mp3)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
On some browsers like IOS Safari the index.html updates automatically and doesn't need refreshing but with Google Chrome I need to refresh the page to see the updated page.
After researching I'm assuming I need no-store, max-age=0. Would it be more efficient to use no-cache to check for modification?
I've tried this mashup, do you see any problems:
<FilesMatch "\.(png|ttf|js|css|ico|mp3)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
<Files index.html>
Header set Cache-Control "no-store, max-age=0"
</Files>
Whenever I change something on a Joomla page, like an image, CSS, or whatever, I have to refresh the page in Chrome with ctrl-shift-r.
I'd like to disable any cache, so that I don't have to do that.
How many cache places do I need to disable?
server cache
joomla cache
browser cache
?, do I have to disable the browser cache aswell?
..or can I set a timeout on all items?
Any pointers as to what I can try?
It seems that the only issue that you're having is the browser cache. Try adding the following to your .htaccess file:
ExpiresActive Off
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 "Tue, 1 Jan 2019 00:00:00 GMT"
This should do it.
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
We're having a page where we're serving images from amazon S3 that are getting cached. However, they've might been changed on a second page.
The issue now is that when I click on a link with the url to the previous pages, the images are not reloaded.
However, doing a refresh in the browser on the page afterwards correctly loads the new images. I am curious why is that because the image cache headers are correct (as can be seen from manual refresh) and what do to to handle this properly aka reload the new images when going to the previous page with a simple url link?
Try This.
function myFunction() {
location.reload();
<button onclick="myFunction()">Reload page</button>
Reference : Here
You can add a random dummy variable to your link. You don't use the value of the variable but the link is different, thus, the brwoser will reload the page without cache.
For example:
Link
If you have an access to the .htaccess file you can add this
<filesMatch "\.(jpg|jpeg|png|bmp)$">
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>
to prevent chaching images.
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.