I use following apache code to cahce staic files like css:
<FilesMatch "\.(css|js)$">
Header set Cache-Control " public, max-age=3600, no-transform, immutable "
</FilesMatch>
its work grate but when adding this code browsers fail to do the cache html:
<FilesMatch "\.(html)$">
Header set Cache-Control " public, max-age=90 "
Header set expires " Tue, 01 Jan 2050 1:00:00 GMT"
</FilesMatch>
I even tried to use "must-revalidate" to use the cache if the content had not changed
This attempt was also in vain
<FilesMatch "\.(html)$">
Header set Cache-Control " public, max-age=90, must-revalidate "
Header set expires " Tue, 01 Jan 2050 1:00:00 GMT"
</FilesMatch>
This image shows that the css file is cached well, but the html file is downloaded completely from the beginning(3.3kb), even after revalidate:
Nobody has any idea to hold html files for 90 seconds?
Related
I have a page the includes an iframe.…
<!DOCTYPE html>
<html>
<body>
<!-- … -->
<iframe
src="/assets/js/pdfjs/web/viewer.html?file=2021-09-12_1200-file.pdf#zoom=page-width"
style="..."
></iframe>
<!-- … -->
</body>
</html>
That includes the following response headers…
HTTP/1.1 200 OK
Date: Tue, 26 Oct 2021 11:02:17 GMT
Server: Apache/2.4.38 (Debian)
X-Powered-By: PHP/7.3.27
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
X-DEBUGKIT-ID: 77761443-2882-4882-b0e1-01eea68deded
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 2349
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
If I change the file path in the iframe src attribute (e.g /assets/js/pdfjs/web/viewer.html?file=2021-10-26_1200-file.pdf#zoom=page-width - note the new timestamp), and reload the page, the old file is still returned, rather than the new one, despite the Cache-Control: no-store, no-cache, must-revalidate header.
Debugging the requests recevied by the server, I can see…
The parent page is requested and returned with the headers as above (with new Date & X-DEBUGKIT-ID header values), and the correct, updated iframe src value.
The iframe page is being requested with the original filename, rather than the new one (I'm assuming from the cached page).
If I reload using Cmd+Shift+R (to ignore the browser cache), then the correct iframe document is loaded.
What am I missing in this setup that is causing the page to be cached? I thought that the Cache-Control header we have should be sufficient here.
If I add a random query string to the parent page this correctly loads new documents, but I feel this is a hack that should not be needed.
I've also tried adding a Etag header containing a random string that's different for each request, but this seems to have no effect on the browser caching.
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.
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.
When you are in the development stage it's a bit embarrassing to constantly remind your clients to clear the cache or to ask them to "refresh the page a bunch of times."
Is there a setting that I, the developer, can set in nginx or as a meta tag in the HTML to force all browsers to stop caching my page?
Theoretically, according to Difference between Pragma and Cache-control headers? and also http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.32, the following may be sufficient, in nginx:
add_header Cache-Control no-cache;
In practice, you might have to specify some extra directives; it would seem like using the expires directive should be sufficient, which will automatically add the Cache-Control header as above, too:
expires -1;
Try setting these headers:
"Cache-control: no-store, no-cache, must-revalidate"
"Expires: Mon, 26 Jun 1997 05:00:00 GMT"
"Pragma: no-cache"
"Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"
This will prevent the browsers from cashing the pages.
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.