We've build an application with vueJs using Quasar Framework
But after each rebuild (with quasar build command executed by a gitlab runner) our main index.html file isn't reload properly by client's browser (seems it's more chrome than other browser who's keeping the index.html in cache)
In our application we have many css and js file named like that for example :
app.34456435fdfe.js
vendor.4325gfd.js
runtime.ksdj424.js
The app file js and the runtime file js change properly but the older version still stay in cache client browser loaded because the index.html version loading those files isn't the last (but those store in the cache browser)
I explain :
First build make an app.0000000.js (for exemple) and a runtime.0123456.js
The second make an app.000001.js and a runtime.654321.js
But the two first version still loading in broswer (due to the index.html file cached) so the client is stuck on a white page (because app.0000000.js still not exist it return an 404)
How can we force to clear the cache ?
In the index.html file of quasar we’ve adding this :
<meta http-equiv=“cache-control” content=“no-cache, no-store, private, must-revalidate, post-check=0, pre-check=0”>
<meta http-equiv=“cache-control” content=“max-age=0”>
<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”>
We have an .htaccess too with :
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/html M0
</IfModule>
<IfModule mod_headers.c>
<filesMatch "\.(html|htm|js|css)$">
FileETag None
Header unset ETag
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</filesMatch>
Header unset ETag
Header unset Last-Modified
</IfModule>
And in the httpd.conf file we have added this :
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/html M0
</IfModule>
It's seems working properly on Safari and Firefox but on chrome we still have "Loaded from disk cache"
Chrome debug tool
More debug tool
Header properly set
This issue we're facing is a real problem, we will use service-worker in few weeks but we need a solution for clearing cache properly until we develop SW (no caching html will be better)
Thanks ! (And sorry for my english)
NB :
I've tried that : How to control web page caching, across all browsers?
And that : VueJS/browser caching production builds (similar problem)
Related
I am working on a website with PHP in backend and AngularJS in frontend. and it's served via apache2.4.
My problem is when I update my website to a new version some users cannot see the latest modifications, so I added this .htaccess to force cleaning the cache every 1 hour, but it doesn't work as I expected.
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=3600, must-revalidate, private"
</ifModule>
Could you give me the right cache configuration to force the browsers to get the last update whenever a new version is available?
Within your build process, you could append a query parameter to your static files such as JS / CSS like : app.js?1476109496 (where epoch is a unique reference such as deployment epoch, commit hash or similar) which would cause browsers to request a new version without needing to mess with your .htaccess.
I'm using Font Awesome in my web application but none of my icons are displaying in Internet Explorer 11. Per their troubleshooting guide
I learned that this behavior can be tied to the no-store Cache-control header, or the no-cache Pragma header.
How can I change these header values?
Ideally, there would be some option in the IE developer tools where I can adjust this, but this does not seem possible. I have been playing around on my web server - Apache 2.4 (Debian) - and attempted the following in my sites-enabled configuration:
<FilesMatch "\.(eot|woff|ttf|svg|otf)$">
<ifModule mod_headers.c>
Header unset Cache-Control
Header unset Pragma
</ifModule>
</FilesMatch>
I reloaded Apache and no change, these Headers are still set, my icons are still not displayed in Internet Explorer.
I don't have that much experience with Apache, I could really use some help here! Thanks in advance.
I have installed and configured an Apache server with a virtualhost which serves images.
When I load my page with images on the browser the second time (the images should be on cache after the first time the page is loaded), the browser doesnt get the images (or files) from cache, and think that it should.
What is wrong? I am using Google Chrome, and when I load some other web from other server the cache works, so I think that I have some problem with the Apache, but I am not sure.
Thank you very much.
The response is a video-segment which is played by Dash player.
Response headers:
accept-ranges:bytes
content-length:194431
date:Wed, 09 Mar 2016 07:42:07 GMT
etag:"2f77f-52acd33f8b167"
last-modified:Tue, 02 Feb 2016 17:55:12 GMT
server:Apache/2.4.18 (Unix) OpenSSL/1.0.2e PHP/7.0.2
status:200
After doing that:
ExpiresActive On
# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(mp4|m4s)$">
ExpiresDefault "access plus 3600 seconds"
Header set Cache-Control "public"
Header set Content-Type "video/mp4"
Header set Vary "Host"
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
The headers are:
accept-ranges:bytes
access-control-allow-origin:*
cache-control:public
content-length:194431
content-type:video/mp4
But it doesnt save on the cache, I mean, when I reload the web or the video, it does not get it from the cache as it should.
You are not including any cache-control headers telling the browser to cache the resources. The spec is unclear how to handle this but most browsers choose not to cache unless explicitly told to.
You need to include Apache config like this (assuming you are already including the mod_expiries module):
ExpiresActive On
# Set up caching on media files for 1 week
<filesMatch ".([iI][cC][oO]|[gG][iI][fF]|[jJ][pP][gG]|[jJ][pP][eE][gG]|[pP][nN][gG]|[fF][lL][vV]|[pP][dD][fF]|[sS][wW][fF]|[mM][oO][vV]|[mM][pP]3|[wW][mM][vV]|[pP][pP][tT])$">
ExpiresDefault A604800
Header append Cache-Control "public"
</filesMatch>
# Set up caching on font files for 6 months
<filesMatch ".([eE][oO][tT]|[tT][tT][fF]|[sS][vV][gG]|[Ww][Oo][Ff][Ff]|[Ww][Oo][Ff][Ff]2)$">
ExpiresDefault 15552000
Header append Cache-Control "public"
</filesMatch>
Which will then produce a header like this:
cache-control:max-age=10800, public
I've written a blog post on this if you want more details: https://www.tunetheweb.com/performance/http-performance-headers/caching/
OK, I have solved the problem.
I was using an https connection and the certificate I was using didnt have the correct parameters (common name must be the name of the url programmed on the server) and the certificate of the server must be authenticate by some CA, so I have made CA certificates to authenticate the server certificates. This means that if you have an unsecure https connection, Chrome does not save files on cache.
After having all the certificates corrected, I have upload to google chrome the certificates to trust my web (configuration of google Chrome, advanced options, Manage https/ssl certificates). After that, I can save files on cache because of the certificates which makes the https connection secure (green lock on the chrome url bar).
That was my problem and this is how I solved it.
Thanks for your answers and your time!! ;)
We have an application that allows users to add/edit/replace/delete content (text, images, swfs, mp3s, etc). We want the admins to always have the latest updated files by using a no-cache header and when a user runs the application, everything gets/uses the cache.
I have looked into solutions and have tried using html meta tags like:
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache, no-store" />
<meta http-equiv="pragma" content="no-cache" />
But that doesn't seem to be a good solution as this happens after the headers are created and doesn't change the media (images, swfs, mp3s, etc) headers.
I wanted to use apache to set the headers and came across this code for this site:
<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>
This seems to be a great solution, however the only real difference between when we need it cached and when it shouldn't be cached is the URL (preview.jsp vs run.jsp), so we can't match it by file type as most files are the same.
Does anyone have a good solution for this type of scenario?
Thanks.
EDIT:
Preview.jsp and run.jsp basically are the same only with different jsp and js processing. They read in the same content and media through an iframe. For example, they each look like:
<%
//Some JSP
%>
/* HTML Headers, JS, ETC */
<iframe id="contentFrame" seamless="1" src="http://somedomain.com/template.html"></iframe>
/* End HTML */
preview.jsp and run.jsp appear in the same directory and use all the same resources. I am looking for a solution to have preview.jsp not to cache anything and run.jsp to cache things.
Server is setup with Apache Tomcat.
A combination of SetEnvIf and Header might do the trick:
# Image, CSS and JavaScript requests normally contain the Referer header
# which tells apache which page is requesting the resource
# Use SetEnvIf directive to set a flag for internal uses
SetEnvIf Referer preview\.jsp force_no_cache
# Header directive optionally accepts env= argument
# If present, the directive is fired if the flag is set
Header unset ETag env=force_no_cache
# repeat for other headers
You can set up corresponding headers in your Java servlet. Apache mod_headers is mostly supposed to work for static resources, managed by Apache. While everything that is provided by application servers is managed on the AS side.
Usually, you can use Filters for this purpose. Here is an example: http://www.tidytutorials.com/2009/11/adding-headers-to-requests-in-filters.html
I'm trying to understand if is it possible to avoid request for some embedded objects, loading them directly from cache without asking to web server if the object is valid or not (i don't want web server response to me with 304 http status code) Is it possible ? Does the expire header works for this way? How?
Of course: Request:
<script scr="my_js.php"></script>
Response:
<? header("HTTP/1.1 304 Not Modified");
header("Expires: Mon, 31 Dec 2035 12:00:00 gmt");
header("Cache-Control: max-age=".(60*60*24*365));
echo "//this is a simpe example"; ?>
Solved
Browser loads resources from his cache without asking them to the web server only the first time you open the page (new tab or new browser window).
The other times browser ALWAYS ask information to the server about the resources saved in his cache. Then, the web server response with 200 or 301.
Yes, setting a distant expiry header and the asset will not be downloaded again until that expiry.
If you remove the Last-Modified and ETag header, you will totally eliminate If-Modified-Since and If-None-Match requests and their 304 Not Modified Responses, so a file will stay cached without checking for updates until the Expires header indicates new content is available!
Source.
From my htaccess ...
<IfModule mod_headers.c>
Header unset Pragma
FileETag None
Header unset ETag
# cache images/pdf docs for 10 days
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js)$">
Header set Expires "Mon, 31 Dec 2035 12:00:00 gmt"
Header unset ETag
Header unset Last-Modified
</FilesMatch>
# cache html/htm/xml/txt diles for 2 days
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>
</IfModule>
it seems doesn't works .... for example firebug's net panel show me always 200 status code and access.log file report me that external objects are always requested by the browser.