1147

I have noticed that some browsers (in particular, Firefox and Opera) are very zealous in using cached copies of .css and .js 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.

What is the most elegant way of forcing the user's browser to reload the file when it has changed?

Ideally, the solution would not force the browser to reload the file on every visit to the page.


I have found John Millikin's and da5id's suggestion to be useful. It turns out there is a term for this: auto-versioning.

I have posted a new answer below which is a combination of my original solution and John's suggestion.

Another idea that was suggested by SCdF 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 pi..)

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

6
  • I have this in my .htaccess, and never any problems with cached files: ExpiresActive On ExpiresDefault "modification". May 15, 2014 at 14:06
  • 2
    I'd definitely agree that adding versioning info to the file's URL is by far the best way to go. It works, all the time, for everyone. But, if you're not using it, and you just need to reload that one CSS or JS file occasionally in your own browser... just open it in its own tab and hit SHIFT-reload (or CTRL-F5)! You can do effectively the same thing using JS by loading a file in a (hidden) iframe, waiting till it loads, and then calling iframe.contentWindow.location.reload(true). See method (4) of stackoverflow.com/a/22429796/999120 - that's about images, but the same applies.
    – Doin
    Dec 27, 2015 at 5:17
  • 6
    I really appreciate the way this question was asked and has been updated since then. It completely described what I should expect in the answers. I am going to follow this approach in my questions from now on. Cheers!
    – rd22
    Aug 1, 2016 at 9:46
  • 2
    For reference: da5id's's deleted answer is "If an update is big/important enough I generally change the name of the file.". Nov 28, 2020 at 3:48
  • If the changes are not very often, I have a suggestion. Just change the file name and edit the source code to include the new file name. Then there’s no cached file for the browser to read. Feb 24, 2021 at 10:00

58 Answers 58

493

This solution is written in PHP, but it should be easily adapted to other languages.

The original .htaccess regex can cause problems with files like json-1.3.js. The solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

Now, we write the following PHP function:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded. works on all type of paths.
 */
function auto_version($file) {
  if($file[0] !== '/') {
    $file = rtrim(str_replace(DIRECTORY_SEPARATOR, '/', dirname($_SERVER['PHP_SELF'])), '/') . '/' . $file;
  }
  
  if (!file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
  return $file;
  
  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

To this:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.

This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.

36
  • 18
    My own static content server does exactly the same, except I use a parameter for versioning (base.css?v=1221534296) rather than a filename change (base.1221534296.css). I suspect your way may be a little bit more efficient though. Very cool. Jun 2, 2011 at 20:55
  • 4
    @Kip: Very slick solution. URL rewriting obviously has much more to offer than just prettyfying urls.
    – James P.
    Aug 6, 2011 at 12:51
  • 40
    I see a problem with this, that it accesses the filesystem many times - exactly - number of links * number of requests/sec... that may or may not be a problem for you. Sep 24, 2012 at 23:34
  • 3
    @AlixAxel: No, browsers will re-fetch it when the parameter changes, but some public proxies won't cache files with url parameters, so the best practice is to include the version in the path. And the mod_rewrite overhead is miniscule compared to every other performance bottleneck in WPO Nov 27, 2012 at 11:54
  • 8
    Is the first file_exists check really necessary? filemtime will return false on failure, so why not just assign the filemtime value to a variable and check if it's false before renaming the file? That would cut down on one unnecessary file operation which would really add up.
    – Gavin
    Jun 4, 2014 at 23:21
229

Simple Client-side Technique

In general, caching is good... So there are a couple of techniques, depending on whether you're fixing the problem for yourself as you develop a website, or whether you're trying to control cache in a production environment.

General visitors to your website won't have the same experience that you're having when you're developing the site. Since the average visitor comes to the site less frequently (maybe only a few times each month, unless you're a Google or hi5 Networks), then they are less likely to have your files in cache, and that may be enough.

If you want to force a new version into the browser, you can always add a query string to the request, and bump up the version number when you make major changes:

<script src="/myJavascript.js?version=4"></script>

This will ensure that everyone gets the new file. It works because the browser looks at the URL of the file to determine whether it has a copy in cache. If your server isn't set up to do anything with the query string, it will be ignored, but the name will look like a new file to the browser.

On the other hand, if you're developing a website, you don't want to change the version number every time you save a change to your development version. That would be tedious.

So while you're developing your site, a good trick would be to automatically generate a query string parameter:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

Adding a query string to the request is a good way to version a resource, but for a simple website this may be unnecessary. And remember, caching is a good thing.

It's also worth noting that the browser isn't necessarily stingy about keeping files in cache. Browsers have policies for this sort of thing, and they are usually playing by the rules laid down in the HTTP specification. When a browser makes a request to a server, part of the response is an Expires header... a date which tells the browser how long it should be kept in cache. The next time the browser comes across a request for the same file, it sees that it has a copy in cache and looks to the Expires date to decide whether it should be used.

So believe it or not, it's actually your server that is making that browser cache so persistent. You could adjust your server settings and change the Expires headers, but the little technique I've written above is probably a much simpler way for you to go about it. Since caching is good, you usually want to set that date far into the future (a "Far-future Expires Header"), and use the technique described above to force a change.

If you're interested in more information on HTTP or how these requests are made, a good book is "High Performance Web Sites" by Steve Souders. It's a very good introduction to the subject.

13
  • 3
    The quick trick of generating query string with Javascript works great during active development. I did the same thing with PHP. May 21, 2013 at 18:04
  • 2
    This is the easiest way of accomplishing the original poster's desired result. The mod_rewrite method works well if you want to force a reload of the .css or .js file EVERY time you load the page. This method still allows caching until you actually change the file and really want it to force reload.
    – scott80109
    Feb 19, 2014 at 0:22
  • 2
    This doesn't seem to work for my CSS when I use: <link href='myCss.css?dev=14141'...>
    – Noumenon
    Jul 24, 2015 at 17:26
  • 6
    This is not a viable solution. A good number of browsers will simply refuse to cache anything with a query string on it. This is the reason why Google, GTMetrix, and similar tools will raise a flag if you have query strings on references to static content. While it is certainly a decent solution for development, it is absolutely not a solution for production. Also, the browser controls the caching, not the server. The server simply SUGGESTS when it should be refreshed; a browser does not HAVE to listen to the server (and often doesn't). Mobile devices are a prime example of this.
    – Nate I
    Apr 24, 2018 at 17:59
  • 1
    The document.write solution works too good, now I can't set a breakpoint in Chrome because the url keeps changing and thus keeps refreshing and losing my breakpoints!
    – CoderSteve
    Jul 26, 2019 at 15:30
115

Google's mod_pagespeed plugin for Apache will do auto-versioning for you. It's really slick.

It parses HTML on its way out of the webserver (works with PHP, Ruby on Rails, Python, static HTML -- anything) and rewrites links to CSS, JavaScript, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.

9
  • 1
    That's great, but still in beta. Can it be used for enterprise service? Jul 15, 2011 at 4:00
  • 28
    This is WRONG (auto-fiddling with the source) when it is clearly a browser-issue. Give us (developers) a real brain-wipe-refresh: <ctrl>+F5
    – T4NK3R
    Sep 20, 2011 at 12:50
  • 26
    mod_pagespeed is functionally equivalent to a completely automatic build/compile step for your html/css/js. I think you'd be hard pressed to find any serious developers who think build systems are intrinsically wrong, or that there's anything wrong with it being completely automatic. The analogy of a clean build is to clear mod_pagespeed's cache: code.google.com/p/modpagespeed/wiki/…?
    – Leopd
    Sep 20, 2011 at 17:38
  • 4
    @T4NK3R mod_pagespeed doesn't have to do anything with your source to do cache management, it was simply mentioned that it can help with things like minification. As to whether or not it's "WRONG", that completely subjective. It may be wrong for you, but that doesn't mean it's instirinsically bad.
    – Madbreaks
    Aug 3, 2012 at 18:10
  • 2
    It works with nginx too though you have to build it from source : developers.google.com/speed/pagespeed/module/…
    – Rohit
    Jan 22, 2015 at 7:41
99

Instead of changing the version manually, I would recommend you use an MD5 hash of the actual CSS file.

So your URL would be something like

http://mysite.com/css/[md5_hash_here]/style.css

You could still use the rewrite rule to strip out the hash, but the advantage is that now you can set your cache policy to "cache forever", since if the URL is the same, that means that the file is unchanged.

You can then write a simple shell script that would compute the hash of the file and update your tag (you'd probably want to move it to a separate file for inclusion).

Simply run that script every time CSS changes and you're good. The browser will ONLY reload your files when they are altered. If you make an edit and then undo it, there's no pain in figuring out which version you need to return to in order for your visitors not to re-download.

6
  • 1
    unfortunately I do not know how to implement it. Advice please ...more details... Oct 20, 2014 at 9:56
  • An implementation in shell, ruby, etc would be great
    – Peter
    Dec 9, 2014 at 19:28
  • 3
    Very nice solution.. but I think it is resources consuming to calculate the hash of the file in every file request (css, js, images,html..etc) for every single page visit.
    – DeepBlue
    May 2, 2015 at 22:18
  • This is a standard solution for those using js or css bundling with gulp, grunt or webpack, the implementation differs for each solution, but hashing your files as a build step is common and suggested for modern bundled apps Apr 13, 2018 at 22:45
  • @DeepBlue - answer says "run that script every time CSS changes". That's NOT on every page visit. OTOH The answer leaves out major details - how the changed hash becomes part of the URL? I don't know... Apr 14, 2019 at 21:35
99

I am not sure why you guys/gals are taking so much pain to implement this solution.

All you need to do if get the file's modified timestamp and append it as a querystring to the file.

In PHP I would do it as:

<link href="mycss.css?v=<?= filemtime('mycss.css') ?>" rel="stylesheet">

filemtime() is a PHP function that returns the file modified timestamp.

10
  • You can just use mycss.css?1234567890.
    – Gavin
    Jun 4, 2014 at 23:43
  • 5
    very elegant, though I have slightly modified it to <link rel="stylesheet" href="mycss.css?<?php echo filemtime('mycss.css') ?>"/>, just in case some of the arguments on this thread about caching URL's with GET variables (in the format suggested) are correct Dec 24, 2015 at 13:52
  • further to my last comment, I've seen that wordpress uses ?ver= so who knows! Dec 24, 2015 at 14:25
  • 1
    Great solution. In addition for me I found that filemtime didn't work for a fully qualified domain name (FQDN) so I used the FQDN for the href part and $_SERVER["DOCUMENT_ROOT"] for the filemtime part. EX: <link rel="stylesheet" href="http ://theurl/mycss.css?v=<?php echo filemtime($_SERVER["DOCUMENT_ROOT"] . '/mycss.css') ?>"/>
    – rrtx2000
    Aug 18, 2016 at 16:56
  • 1
    There are multiple things wrong with this approach. First, this eliminates caching on this file entirely. The question required forcing a refresh of the asset WHEN IT CHANGED, not preventing caching entirely (which is a VERY bad idea in general). Second, query strings on static files are a bad idea as some browsers will not cache them at all, others cache them no matter what the query string is. Overall, this is a very junior solution and questioning why people deliberated over a proper solution (as opposed to a hack) just shows a general lack of understanding on the matter.
    – Nate I
    Apr 16, 2019 at 15:28
58

You can just put ?foo=1234 at the end of your CSS / JavaScript import, changing 1234 to be whatever you like. Have a look at the Stack Overflow HTML source for an example.

The idea there being that the ? parameters are discarded / ignored on the request anyway and you can change that number when you roll out a new version.


Note: There is some argument with regard to exactly how this affects caching. I believe the general gist of it is that GET requests, with or without parameters should be cachable, so the above solution should work.

However, it is down to both the web server to decide if it wants to adhere to that part of the spec and the browser the user uses, as it can just go right ahead and ask for a fresh version anyway.

9
  • Nonsense. The query-string (aka. GET parameters) are part of the URL. They can, and will be cached. This is a good solution.
    – troelskn
    Sep 23, 2008 at 15:39
  • 9
    @troelskn: The HTTP 1.1 spec says otherwise (with respect to GET and HEAD requests with query params): caches MUST NOT treat responses to such URIs as fresh unless the server provides an explicit expiration time. See w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9 Sep 23, 2008 at 18:52
  • 4
    I tried the query string type of versioning with all major browsers and they DO cache the file, specs or not. However, I think it's better to use the style.TIMESTAMP.css format without abusing query strings anyway because there's still the possibility that caching proxy software WILL NOT cache the file. Oct 8, 2009 at 15:24
  • 36
    Worth noting, for whatever reason, that Stackoverflow itself uses the query string method.
    – jason
    May 1, 2010 at 20:13
  • 2
    Have verified that using ?=parameter will not make browsers re-fetch cached file when parameter changes. The only way is to change the file name itself programatically at the server end as answered by Kip
    – arunskrish
    Jun 2, 2013 at 6:10
43

I've heard this called "auto versioning". The most common method is to include the static file's modification time somewhere in the URL, and strip it out using rewrite handlers or URL configurations:

See also:

1
  • 3
    Thanks, I guess this was another case where my idea has been discussed, I just didn't know what it was called so I never found it on Google searches.
    – Kip
    Sep 23, 2008 at 12:12
34

The 30 or so existing answers are great advice for a circa 2008 website. However, when it comes to a modern, single-page application (SPA), it might be time to rethink some fundamental assumptions… specifically the idea that it is desirable for the web server to serve only the single, most recent version of a file.

Imagine you're a user that has version M of a SPA loaded into your browser:

  1. Your CD pipeline deploys the new version N of the application onto the server
  2. You navigate within the SPA, which sends an XMLHttpRequest (XHR) to the server to get /some.template
  • (Your browser hasn't refreshed the page, so you're still running version M)
  1. The server responds with the contents of /some.template — do you want it to return version M or N of the template?

If the format of /some.template changed between versions M and N (or the file was renamed or whatever) you probably don't want version N of the template sent to the browser that's running the old version M of the parser.†

Web applications run into this issue when two conditions are met:

  • Resources are requested asynchronously some time after the initial page load
  • The application logic assumes things (that may change in future versions) about resource content

Once your application needs to serve up multiple versions in parallel, solving caching and "reloading" becomes trivial:

  1. Install all site files into versioned directories: /v<release_tag_1>/…files…, /v<release_tag_2>/…files…
  2. Set HTTP headers to let browsers cache files forever
  • (Or better yet, put everything in a CDN)
  1. Update all <script> and <link> tags, etc. to point to that file in one of the versioned directories

That last step sounds tricky, as it could require calling a URL builder for every URL in your server-side or client-side code. Or you could just make clever use of the <base> tag and change the current version in one place.

† One way around this is to be aggressive about forcing the browser to reload everything when a new version is released. But for the sake of letting any in-progress operations to complete, it may still be easiest to support at least two versions in parallel: v-current and v-previous.

5
  • Michael - your comment is very relevant. I cam here precisely trying to find a solution for my SPA. I got some pointers, but had to come up with a solution myself. In the end, I was really happy with what I came up with so I wrote a blog post and an answer to this question (including code). Thanks for the pointers
    – statler
    May 12, 2016 at 8:23
  • Great comment. I can't understand while people keep talking about cache busting and HTTP caching as the real solution to web sites caching problems without comenting the new problems of SPAs, as if this were a marginal case. Jun 30, 2017 at 15:46
  • 2
    Excellent response and absolutely ideal strategy! And bonus points for mentioning the base tag! As for supporting old code: this isn't always a possibility, nor is it always a good idea. New versions of code may support breaking changes to other pieces of an app or may involve emergency fixes, vulnerability patches, and so on. I have yet to implement this strategy myself, but I've always felt overall architecture should allow for deploys to tag an old version as obsolete and force a reload the next time an asynchronous call is made (or just forcefully de-auth all sessions via WebSockets). Dec 23, 2017 at 0:30
  • Nice to see a well thought answer in regards to single page applications.
    – Nate I
    Apr 16, 2019 at 15:33
  • That's "blue-green deployment" if you want to search for more info.
    – Fil
    Jul 16, 2019 at 11:10
18

In Laravel (PHP) we can do it in the following clear and elegant way (using file modification timestamp):

<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>

And similar for CSS

<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">

Example HTML output (filemtime return time as as a Unix timestamp)

<link rel="stylesheet" href="assets/css/your.css?v=1577772366">
2
  • what is the output of this command in html? And what if I need to renew only versions like ?v=3, ?v=4 and etc. - Doesn't force browser to load css everytime user enters the website Sep 28, 2017 at 5:38
  • filemtime: "This function returns the time when the data blocks of a file were being written to, that is, the time when the content of the file was changed." src: php.net/manual/en/function.filemtime.php Sep 28, 2017 at 11:12
16

Don’t use foo.css?version=1!

Browsers aren't supposed to cache URLs with GET variables. According to http://www.thinkvitamin.com/features/webapps/serving-javascript-fast, though Internet Explorer and Firefox ignore this, Opera and Safari don't! Instead, use foo.v1234.css, and use rewrite rules to strip out the version number.

5
  • 1
    First of all browsers don't cache, thats a function of HTTP. Why would http care about the structure of a URI? Is there an officail reference to a spec that states the HTTP cacheing should understand the semantics of a URI so that it won't cache items with a query string? Sep 23, 2008 at 8:17
  • 14
    A web browser that includes the functionality of caching objects (check your browser's cache directory). HTTP is a protocol including directives from servers to clients (proxies, browsers, spiders etc) suggesting cache control.
    – tzot
    Sep 29, 2008 at 15:47
  • The thinkvitamin.com link is broken (the domain seems to exist, but there isn't any reposnse). Nov 22, 2020 at 0:58
  • archive.org copy of the article: web.archive.org/web/20060523204906/http://www.thinkvitamin.com/… from May 2006 , but according to this answer here stackoverflow.com/a/85386/338265 The claim about Opera & Safari not caching was false. But we're more interested in whether browsers bust their caches when seeing different query params (most browsers) (in 2021).
    – Harry Wood
    Nov 12, 2021 at 0:05
  • @AnthonyWJones, that is patently false. Brave caches files even with caching turned off in evwry way imaginable. You have no idea the hoops I go through to bust Brave caching files. And if you use import in a JavaScript file, caching CANNOT be turned off at all. The only solution is to change the filename, and then all debugging breakpoints are destroyed each time in dev tools. Apr 8 at 0:13
15

Here is a pure JavaScript solution

(function(){

    // Match this timestamp with the release of your code
    var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);
 
    var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');

    if(lastCacheDateTime){
        if(lastVersioning > lastCacheDateTime){
            var reload = true;
        }
    }

    localStorage.setItem('lastCacheDatetime', Date.now());

    if(reload){
        location.reload(true);
    }

})();

The above will look for the last time the user visited your site. If the last visit was before you released new code, it uses location.reload(true) to force page refresh from server.

I usually have this as the very first script within the <head> so it's evaluated before any other content loads. If a reload needs to occurs, it's hardly noticeable to the user.

I am using local storage to store the last visit timestamp on the browser, but you can add cookies to the mix if you're looking to support older versions of IE.

2
  • 1
    I tried something like this, this will only work on the reloaded page, but if the site has multi pages sharing same css/images then other pages will still use old resources.
    – DeepBlue
    May 3, 2015 at 0:29
  • Dumb question: can I simply inject this code into my very basic static HTML page?
    – David.P
    Nov 10, 2022 at 14:23
12

The RewriteRule needs a small update for JavaScript or CSS files that contain a dot notation versioning at the end. E.g., json-1.3.js.

I added a dot negation class [^.] to the regex, so .number. is ignored.

RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
2
  • 2
    Thanks for the input! Since I wrote this post I've been burned by this too. My solution was to only rewrite if the last part of the filename contains exactly ten digits. (10 digits covers all timestamps from 9/9/2001 to 11/20/2286.) I've updated my answer to include this regex: ^(.*)\.[\d]{10}\.(css|js)$ $1.$2
    – Kip
    Aug 5, 2010 at 21:07
  • I understand regex, but I don't understand what problem you are solving with [^.] here. Also, there is no benefit to writing \d inside of a character class -- \d+ will do the same thing. As posted, your pattern will be matching any number of characters (greedily), then a literal dot, then a non-dot, then one-or-more digits, then a dot, then css or js, then the end of the filename. No match for your sample input: regex101.com/r/RPGC62/1 Dec 5, 2019 at 6:52
11

Interesting post. Having read all the answers here combined with the fact that I have never had any problems with "bogus" query strings (which I am unsure why everyone is so reluctant to use this) I guess the solution (which removes the need for Apache rewrite rules as in the accepted answer) is to compute a short hash of the CSS file contents (instead of the file datetime) as a bogus querystring.

This would result in the following:

<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />

Of course, the datetime solutions also get the job done in the case of editing a CSS file, but I think it is about the CSS file content and not about the file datetime, so why get these mixed up?

0
11

For ASP.NET 4.5 and greater you can use script bundling.

The request http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 is for the bundle AllMyScripts and contains a query string pair v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81. The query string v has a value token that is a unique identifier used for caching. As long as the bundle doesn't change, the ASP.NET application will request the AllMyScripts bundle using this token. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle.

There are other benefits to bundling, including increased performance on first-time page loads with minification.

0
9

For my development, I find that Chrome has a great solution.

https://superuser.com/a/512833

With developer tools open, simply long click the refresh button and let go once you hover over "Empty Cache and Hard Reload".

This is my best friend, and is a super lightweight way to get what you want!

5
  • And if you're using Chrome as your development environment, another non-invasive solution is to disable the cache: Under the Settings cog, you can invalidate the disk cache by selecting 'Disable cache' (note: the DevTools must be visible/open for this to work).
    – Velojet
    Feb 5, 2016 at 21:52
  • 1
    What is a "long click"? Nov 28, 2020 at 5:05
  • The link is (effectively) broken. It redirects to the generic page "Chrome DevTools" - developers.google.com/web/tools/chrome-devtools Nov 28, 2020 at 5:05
  • @PeterMortensen When you click and hold down the click button. Jan 13, 2021 at 20:56
  • why not just press ctrl+F5?
    – Alex78191
    Dec 24, 2021 at 10:34
8

Thanks to Kip for his perfect solution!

I extended it to use it as an Zend_view_Helper. Because my client run his page on a virtual host I also extended it for that.

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // Path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // File exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // Fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // Check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // Get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // Write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {
                return $filePath;
            }
        }
    }
}
8

I have not found the client-side DOM approach creating the script node (or CSS) element dynamically:

<script>
    var node = document.createElement("script");
    node.type = "text/javascript";
    node.src = 'test.js?' + Math.floor(Math.random()*999999999);
    document.getElementsByTagName("head")[0].appendChild(node);
</script>
1
  • What have you found then? Can you make that more clear? Preferably by editing your answer (but without "Edit:", "Update:" or similar), not here in comments. Nov 28, 2020 at 6:16
7

Say you have a file available at:

/styles/screen.css

You can either append a query parameter with version information onto the URI, e.g.:

/styles/screen.css?v=1234

Or you can prepend version information, e.g.:

/v/1234/styles/screen.css

IMHO, the second method is better for CSS files, because they can refer to images using relative URLs which means that if you specify a background-image like so:

body {
    background-image: url('images/happy.gif');
}

Its URL will effectively be:

/v/1234/styles/images/happy.gif

This means that if you update the version number used, the server will treat this as a new resource and not use a cached version. If you base your version number on the Subversion, CVS, etc. revision this means that changes to images referenced in CSS files will be noticed. That isn't guaranteed with the first scheme, i.e. the URL images/happy.gif relative to /styles/screen.css?v=1235 is /styles/images/happy.gif which doesn't contain any version information.

I have implemented a caching solution using this technique with Java servlets and simply handle requests to /v/* with a servlet that delegates to the underlying resource (i.e. /styles/screen.css). In development mode I set caching headers that tell the client to always check the freshness of the resource with the server (this typically results in a 304 if you delegate to Tomcat's DefaultServlet and the .css, .js, etc. file hasn't changed) while in deployment mode I set headers that say "cache forever".

2
  • Simply adding a folder which you can rename when necessary will work if you only use relative URLs. And then you make sure to redirect to the proper folder from the base folder, i.e. in PHP: <?php header( 'Location: folder1/login.phtml' ); ?>.
    – Gruber
    Sep 20, 2012 at 8:56
  • 2
    Using the second method, a change to a CSS will invalidate cached copies of all images referenced with relative URLs, which may or may not be desirable.
    – TomG
    Nov 6, 2013 at 15:55
7

You could simply add some random number with the CSS and JavaScript URL like

example.css?randomNo = Math.random()
7

Google Chrome has the Hard Reload as well as the Empty Cache and Hard Reload option. You can click and hold the reload button (in Inspect Mode) to select one.

1
  • 1
    To clarify, by "Inspect Mode", they are referring to "Dev Tools" aka F12, aka ctrl+shift+i, aka ant menu > More Tools > Developer Tools, aka right click > Inspect Element. There is also a setting buried away somewhere in dev tools (I forget the location) to hard reload on every reload. Dec 23, 2017 at 0:20
7

I recently solved this using Python. Here is the code (it should be easy to adopt to other languages):

def import_tag(pattern, name, **kw):
    if name[0] == "/":
        name = name[1:]
    # Additional HTML attributes
    attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
    try:
        # Get the files modification time
        mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
        include = "%s?%d" % (name, mtime)
        # This is the same as sprintf(pattern, attrs, include) in other
        # languages
        return pattern % (attrs, include)
    except:
        # In case of error return the include without the added query
        # parameter.
        return pattern % (attrs, name)

def script(name, **kw):
    return import_tag('<script %s src="/%s"></script>', name, **kw)

def stylesheet(name, **kw):
    return import_tag('<link rel="stylesheet" type="text/css" %s href="/%s">', name, **kw)

This code basically appends the files time-stamp as a query parameter to the URL. The call of the following function

script("/main.css")

will result in

<link rel="stylesheet" type="text/css"  href="/main.css?1221842734">

The advantage of course is that you do never have to change your HTML content again, touching the CSS file will automatically trigger a cache invalidation. It works very well and the overhead is not noticeable.

4
  • could os.stat() create a bottleneck?
    – hoju
    Jul 23, 2012 at 3:19
  • @Richard stat could be a bottleneck if the disk is very slow and the requests are very many. In that case you could cache the timestamp somewhere in memory and purge this cache upon every new deployment. Yet this complexity will not be necessary in the majority of use cases.
    – pi.
    Jul 23, 2012 at 11:06
  • I know this is ancient, but for anybody reading, a timestamp is far too aggressive. It means you never have any caching at all, and if you want that, you can manage that with custom headers for static files.
    – LarryBud
    Jan 11, 2021 at 22:43
  • 2
    @LarryBud: It's the timestamp of the file, not the current timestamp. You'll definitely have caching.
    – pi.
    Jan 14, 2021 at 8:56
6

You can force a "session-wide caching" if you add the session-id as a spurious parameter of the JavaScript/CSS file:

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

If you want a version-wide caching, you could add some code to print the file date or similar. If you're using Java you can use a custom-tag to generate the link in an elegant way.

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>
6

For ASP.NET I propose the following solution with advanced options (debug/release mode, versions):

Include JavaScript or CSS files this way:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix and Global.CssPostfix are calculated by the following way in Global.asax:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}
5

If you're using Git and PHP, you can reload the script from the cache each time there is a change in the Git repository, using the following code:

exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo '  <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;
5

Simply add this code where you want to do a hard reload (force the browser to reload cached CSS and JavaScript files):

$(window).load(function() {
    location.reload(true);
});

Do this inside the .load, so it does not refresh like a loop.

1
  • 1
    Doesn't work on Chrome. Still loading assets from disk cache
    – Jason Kim
    Oct 12, 2017 at 18:08
5

For development: use a browser setting: for example, Chrome network tab has a disable cache option.

For production: append a unique query parameter to the request (for example, q?Date.now()) with a server-side rendering framework or pure JavaScript code.

// Pure JavaScript unique query parameter generation
//
//=== myfile.js

function hello() { console.log('hello') };

//=== end of file

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // document.write is considered bad practice!
    // We can't use hello() yet
</script>')

<script type="text/javascript">
    hello();
</script>
1
  • This example needs editing. The idea is good, but there are confusions with beginning and end script tags in the above.
    – Magnus
    Oct 2, 2020 at 8:25
4

It seems all answers here suggest some sort of versioning in the naming scheme, which has its downsides.

Browsers should be well aware of what to cache and what not to cache by reading the web server's response, in particular the HTTP headers - for how long is this resource valid? Was this resource updated since I last retrieved it? etc.

If things are configured 'correctly', just updating the files of your application should (at some point) refresh the browser's caches. You can for example configure your web server to tell the browser to never cache files (which is a bad idea).

A more in-depth explanation of how that works is in How Web Caches Work.

4

Just use server-side code to add the date of the file... that way it will be cached and only reloaded when the file changes.

In ASP.NET:

<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />

<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>

This can be simplified to:

<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>

By adding an extension method to your project to extend Page:

public static class Extension_Methods
{
    public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
    {
        string sFilePath = oPg.Server.MapPath(sRelPath);
        string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
        string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");

        return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
    }
}
0
4

For developers with this problem while developing and testing:

Remove caching briefly.

"keep caching consistent with the file" .. it's way too much hassle ..

Generally speaking, I don't mind loading more - even loading again files which did not change - on most projects - is practically irrelevant. While developing an application - we are mostly loading from disk, on localhost:port - so this increase in network traffic issue is not a deal breaking issue.

Most small projects are just playing around - they never end-up in production. So for them you don't need anything more...

As such if you use Chrome DevTools, you can follow this disable-caching approach like in the image below:

How to force chrome to reload cached files

And if you have Firefox caching issues:

How to force asset reload on Firefox

How to disable caching in Firefox while in development

Do this only in development. You also need a mechanism to force reload for production, since your users will use old cache invalidated modules if you update your application frequently and you don't provide a dedicated cache synchronisation mechanism like the ones described in the answers above.

Yes, this information is already in previous answers, but I still needed to do a Google search to find it.

3
  • 1
    OP asked something and replied something else. It's not about force load in local but in production and you cannot ask end users to follow above to disable cache etc. Apr 1, 2020 at 13:39
  • 1
    hi, if it worked that would be great, but for some reason it doesn't works... I'm on firefox, and checking this option doesn't prevent firefox of not seeing recent changes in html (but opening in a new private windows works, which is not a suitable workflow). Do you have any ideas ?
    – hugogogo
    Mar 29, 2022 at 10:23
  • in case someone comes to this comment because the solution above looked great but didn't works : i noticed that short cuts like Ctrl-R or f5 are not enough to completely reload a page, but giving focus in address bar (Ctrl_L or by clicking in it), then press enter works, or easier : Ctrl-Shift-R (it works whether this option in dev toolbox is activated or not, so it's actually not a solution to this answer, wich is not an answer to the op question, sorry for that mess)
    – hugogogo
    Mar 29, 2022 at 10:46
3

You can use SRI to break the browser cache. You only have to update your index.html file with the new SRI hash every time. When the browser loads the HTML and finds out the SRI hash on the HTML page didn't match that of the cached version of the resource, it will reload your resource from your servers. It also comes with a good side effect of bypassing cross-origin read blocking.

<script src="https://jessietessie.github.io/google-translate-token-generator/google_translate_token_generator.js" integrity="sha384-muTMBCWlaLhgTXLmflAEQVaaGwxYe1DYIf2fGdRkaAQeb4Usma/kqRWFWErr2BSi" crossorigin="anonymous"></script>
1
  • What browsers, incl. versions, support this? Respond by updating your answer (not here in comments). Nov 28, 2020 at 6:50

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