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"
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)
