3

How can I force the client browser to re-fetch JS / CSS files?

I've noticed that when I add to existing .CSS files, the updates are only applied if the user refreshes the page. (In other words, simply navigating to the page will not work).

I've tried flushing the caches (including JS/CSS) as well as rebuilding my minified CSS/JS files. Unfortunately I'm still seeing this behavior in Chrome, Safari & Firefox. (Internet Explorer funnily enough behaved quite well).

I looked at this question on SO:

What is an elegant way to force browsers to reload cached CSS/JS files?

I was wondering if Magento has any built in way of doing this without the necessary addition of source changes / the installation of third party software?

| improve this question | |
2

I'm not sure about this, but I thing that merging the css/js files could help you achieve what you need.
The file name generated for the merged files is actually a hash of the contents. So if you change the contents and re-merge the files, the file name changes and the browser is forced to load an other file.
But on the other hand I had issues in the past with the merged files.
Even if you don't want a third party extension I just going to leave this here, "just in case you change your mind".
I've used this small extension and I was very happy with it.
The extension adds a ?v=.. at the end of the css and js files. So all you need to do after changing the contents of your resources is to go to the backend and change the value added at the end of the files and everything works out just nicely.

| improve this answer | |
  • Thanks @Marius. I'll likely end up using this if I can't find a workaround. I'm currently using a minifier by Extendware. This unfortunately does not rename the files even if changes are made to them. Cristi mentions that there could be some cache difficulties when using query strings on static resources. So I'd like to avoid that too. – Moose Dec 5 '14 at 7:52
2

The only simple way is to force the filename to change whenever your css/js content changes. Magento doesn't do that even if merging is enabled, but this extension does exactly that - plus, it can also minify js and css.

| improve this answer | |
  • Using query strings is also an option, just like Marius said, but it's not recommended using them on static resources. It makes the resource a bit more difficult to cache in certain scenarios. Also, changing the filename automatically, helps with cache refresh when using reverse proxies (Varnish, Cloudfront). – Cristi Dec 4 '14 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.