Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to force browser to reload cached CSS/JS files?
    text
    copied!<p>I have noticed that some browsers (in particular, Firefox and Opera) are very zealous in using cached copies of <strong>.css</strong> and <strong>.js</strong> files, even between browser sessions. This leads to a problem when you update one of these files but the user's browser keeps on using the cached copy.</p> <p>The question is: what is the most elegant way of forcing the user's browser to reload the file when it has changed?</p> <p>Ideally the solution would not force the browser to reload the file on every visit to the page. I will post my own solution as an answer, but I am curious if anyone has a better solution and I'll let your votes decide.</p> <p><strong>Update:</strong></p> <p>After allowing discussion here for a while, I have found <strong>John Millikin</strong> and <strong>da5id</strong>'s suggestion to be useful. It turns out there is a term for this: <strong>auto-versioning</strong>.</p> <p>I have posted a new answer below which is a combination of my original solution and John's suggestion.</p> <p>Another idea which was suggested by <strong>SCdF</strong> would be to append a bogus query string to the file. (Some Python code to automatically use the timestamp as a bogus query string was submitted by <strong>pi</strong>.). However, there is some discussion as to whether or not the browser would cache a file with a query string. (Remember, we want the browser to cache the file and use it on future visits. We only want it to fetch the file again when it has changed.)</p> <p>Since it is not clear what happens with a bogus query string, I am not accepting that answer.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload