client-side file caching

Question

If I understand correctly, a broswer caches images, JS files, etc. based on the file name. So there's a danger that if one such file is updated (on the server), the browser will use the cached copy instead.

A workaround for this problem is to rename all files (as part of the build), such that the file name includes an MD5 hash of it's contents, e.g.

foo.js -> foo_AS577688BC87654.js
me.png -> me_32126A88BC3456BB.png

However, in addition to renaming the files themselves, all references to these files must be changed. For exmaple a tag such as <img src="me.png"/> should be changed to <img src="me_32126A88BC3456BB.png"/>.

Obviously this can get pretty complicated, particularly when you consider that references to these files may be dynamically created within server-side code.

Of course, one solution is to completely disable caching on the browser (and any caches between the server and the browser) using HTTP headers. However, having no caching will create it's own set of problems.

Is there a better solution?

Thanks, Don

Answer 1

The best solution seems to be to version filenames by appending the last-modified time.

You can do it this way: add a rewrite rule to your Apache configuration, like so:

RewriteRule ^(.+)\.(.+)\.(js|css|jpg|png|gif)$ $1.$3

This will redirect any "versioned" URL to the "normal" one. The idea is to keep your filenames the same, but to benefit from cache. The solution to append a parameter to the URL will not be optimal with some proxies that don't cache URLs with parameters.

Then, instead of writing:

<img src="image.png" />

Just call a PHP function:

<img src="<?php versionFile('image.png'); ?>" />

With versionFile() looking like this:

function versionFile($file){
    $path = pathinfo($file);
    $ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$file).'.';
    echo $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}

And that's it! The browser will ask for image.123456789.png, Apache will redirect this to image.png, so you will benefit from cache in all cases and won't have any out-of-date issue, while not having to bother with filename versioning.

You can see a detailed explanation of this technique here: http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/