Cache all files but except index.html - Apache - html

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>

Related

How many levels of Cache for a Joomla Page

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.

When placing a new .pdf file with the same name on website, in iOS the cached file is downloaded

In .htaccess i have added a "Header set Cache-control" rule and is working fine (most of it) but in iOS this is not working due to the caching in iOS i think. Is there a solution to force refresh the new pdf files?
<IfModule mod_headers.c>
<FilesMatch ".(pdf)$">
Header set Cache-Control "max-age=0, public, must-revalidate"
</FilesMatch>
</IfModule>

Page refresh when clicking on link

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.

Font Icons Not Showing Up

Hello I am working with Magento Version 1.9.0.1 I have been racking my head over and over and I can not get this to work. Any subdomain to my primary domain is not rendering the font-icons that came with the theme, the primary domain however is showing these icons. On another note Safari is rendering my font-icons from my subdomain but Chrome and FireFox are not. Here is what the Chrome Dev Console is outputting
Font from origin 'http://brandster.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://breezesta.brandster.com' is therefore not allowed access.
I did add this to the .htaccess file of the subdomain
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
and it is still not working. Can anyone please shed some light on this issue. Thanks in advance.
Seems as if your htaccess is blocking the use of files from other domains including sub-domains. Maybe try and see if this works?
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*.brandster.com"
</IfModule>
</FilesMatch>
So if that works for you.

Load images directly from server

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.