Fix Caching Issues with Flash, JavaScript, XML, KML or Google Maps

This is a short and sweet post on caching issues. Sites and browsers are built to really optimize resources. They do it so well sometimes that the end result actually breaks your dynamic website instead of updating it as often as you’d like. Today I was working with JW Player, a Flash Movie player that pulls in a list of movies via an XML file.

The problem is that we’re always updating the file with new webinars and training classes. If our clients continued to come to the page each day, it would load a cached version of the playlist and never actually show them the latest and greatest.

As a result, I had to hack the SWF Object code so that it would think that it was loading a new playlist every time.

<script type="text/javascript">
var video = new SWFObject('player.swf','mpl','670','280','9');
var playlist = 'playlist.xml't='+Math.round(1000 * Math.random());
video.addParam('allowscriptaccess','always');
video.addParam('allowfullscreen','true');
video.addParam('flashvars','&file='+playlist+'&playlistsize=350&controlbar=over&playlist=right');
video.write('video');
</script>

The way I tricked the player was by putting a querystring on the list name that generated a random number using JavaScript. No matter who hits the page, it’s going to look for a different filename, so the player will pull in the playlist fresh each time.

This isn’t just handy for JW Player, I’ve also used this technique for Google Maps when dealing with KML files that change dynamically. Simply generate a random querystring and the system will reload the (fairly static) KML file each time the user visits. It’s a hack, but it’s an easy way to essentially turn caching off in these applications that don’t have the option.