Facebook Cookbook - Jay Goldman [98]
We’re going to configure the server so that we can insert version numbers into filenames without it even noticing, and then we’re going to use a function to insert filenames into our documents that automatically calculates the version number based on the last time the file changed. This example assumes a file path of resources/css and resources/js for your CSS and JavaScript files, respectively, as well as a path of images/ for all images, but feel free to adjust this to suit your personal storage preferences:
Assuming your server has mod_rewrite already running properly, drop an .htaccess file into the root directory of your site (or edit your existing one). This is a plain text file.
We’re going to add two rules to that file, one for images and one for everything else. These rules tell Apache to treat hawt_stylez.1.css as hawt_stylez.css, and to do the same for images (JPGs, GIFs, and PNGs) and JavaScript that have a version number after the first period and before the file type extension:
RewriteEngine on
RewriteBase /
RewriteRule ^(.+)/images/(.+)\.(.+)\.(jpg|gif|png)$ $1/images/$2.$4 [L]
RewriteRule ^(.+)/resources/(.+)/(.+)\.(.+)\.(.+)$ $1/resources/$2/$3.$5 [L]
You could use this technique at this point by updating your filenames wherever they’re referred to in your code, without needing to change the actual filenames to match, but that still requires manual labor on your end, and that sucks. The next step is to define a PHP function that will take in a filename and then figure out a timestamp of the last time it was modified and insert that as the version. Create a new PHP file called autoVer.php, stick it wherever you keep includes, and drop this function into it (note that you could rewrite this to skip passing in the server if you’re always pulling your static content from the same server; just hardcode it into the function). Don’t worry about what it does just yet; that’s explained later:
function autoVer($server,$file){
$path = pathinfo($file);
$ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$file).'.';
echo $server . $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}
You’ll need to include your new autoVer.php file into all of your other files. If you already have a header you’re including, stick it in there. Otherwise, drop this into the top of your other pages:
Last step! Wherever you previously referred to a static file, replace the reference with a call to our new function:
media="screen" />
That’s all the magic you need. The reference to screen.css in this example will automagically become something like resources/css/screen.1206750843.css, with the timestamp changing every time you make a change to the CSS file (the PHP filemtime function returns the last modification timestamp for a file). Facebook will note the new filename and request that from your server, which will disregard the version number and return your CSS. The last modified timestamp will remain the same until you touch the file again, so Facebook’s cache will continue to speed things up until you don’t want it to. It’s hard to get more elegant than that.
NOTE
I ran this solution past my good friend Jason DeFillippo (http://www.jpdefillippo.com), the mastermind behind some of the best PHP you’ve ever unknowingly used (including Technorati and http://jpgmag.com) and contributor of Starting Out in PHP. He really dug it, but added that he would “write an update script that builds a conf file that you can trigger via cron or manual update that includes in the particulars and caches it via apc or memcache so it’s not doing a filemtime every time the script is called. Can be hard on the disk for apps with larger traffic.” If that sentence makes any sense to you, you know what to do. For the rest of you, move along. There’s nothing to see here.