Cache busting your Flex SWF and the SWF Compilation Date

UPDATE: It turns out in Firefox my SWFs start being cached after directly midnight. Once I manually clear the cache I don’t have to clear it for a while.

So you’re working on a project and you go to check it in the browser and hit refresh. You test it again and the same problem exists. But wait! Are you looking at the SWF you just compiled or a cached SWF!??!?! There have been so many times I’ve been working on a problem and didn’t realize the SWF was cached in the browser. What if there was a way to tell if you are looking at a cached SWF or a newly compiled SWF? Well NOW YOU CAN!

Taking Igor and Paul’s work a bit further I created a class you can drop into your project with one line of code, that will tell you the compilation date of your swf, if the swf is being viewed for the first time or if it is cached and a version number you can use for testing. It also provides a reload button handler.

Here is a live demo.

Here is the project download. You must go to https://www.assembla.com/wiki/show/flexcapacitor and follow the online getting started guide to pull the class into your project.

This entry was posted in Flash, Flash Catalyst, Flex. Bookmark the permalink.

8 Responses to Cache busting your Flex SWF and the SWF Compilation Date

  1. Alan Klement says:

    While cool, seems rather excessive. If your viewing in the browser, just add a line of javascript to your JS embed function:

    “main.swf?cb=” + new Date().getTime(),…);

  2. Nick Bilyk says:

    Looks good.
    I come across this problem a lot as well, it’s worse when clients look at old versions and get all uppity because “nothing’s been done!”.

    The way I typically handle it is in the html page embedding the swf, I append a version to the querystring. So:

    sample.swf?v=3

    I manually increment this when I push up the new files. It would be nice if I had a script for ANT to do this automatically, but that would take more than ten seconds to do :).

  3. Judah says:

    @alan, @nick – thanks. the class is actually multipurpose. cache busting isn’t it’s the main goal. when i’m developing i run the application from flex builder and then view it in the browser and test. then i go back to Flex Builder, make changes and save, and then go back to the browser and refresh. repeat this process a 100 times. Sometimes FB doesn’t create a new SWF when i think it should. So when i am looking at the swf in the browser and it doesn’t apply my changes i’m left scratching my head. so with this class I get the compile date and compare it to what I’ve stored in a cookie (local shared object). If the compile date is the same as what i’ve stored in the cookie then I know the swf is the same version and its being cached by the browser (can use your tip to always get the newest) or go back into to FB because it hasn’t compiled a new version and I have to manually make the editor “dirty” and resave.

    The other use for this is when you upload your swf to a live client site. You can pull in the compile date and put it into the content, “SIte created on Jan 1st, 2009″. Then you can know if the client is looking at the same swf as you.

  4. Erik says:

    The Firefox Web Developer Toolbar lets you turn off your cache. I use Firefox for Flex development and just leave my cache turned off permanently. (This would make things inconvenient for day-to-day browsing, but I use Safari for that.)

  5. Arnold Aprieto says:

    Having to refresh the browser and clear cache while doing it on the development stage can be pretty annoying. This class will be beneficial for developers as well. Does the Firefox Web Developer Toolbar let’s you clear the cache by just refreshing the web page? I thought it only clears the cache by specifying it on the options menu or totally closing the browser. I’m currently using firebug, but I’ll definitely give this a try.

  6. FlexFlip says:

    How would this work in a pure actionscript (i.e. non-Flex) application.
    var loaderInfo:LoaderInfo = Application(Application.application).loaderInfo; would not be available.

  7. Really great work, every dev needs this for performing iterative builds via FlashBuilder and still keeping their sanity when the changes aren’t taking place.

  8. The way that I do it is to hide the real swf name using apache rewrites.
    Use a .htaccess file to handle random file names and then reference it using a dynamic render swf name in php or another language like this

    In .php template….
    nocache_.swf

    Then use this .htaccess file
    Options +FollowSymlinks
    RewriteEngine on
    RewriteRule ^nocache_[0-9]+\.swf main.swf [NC]

    This will then translate any url to main.swf behind the scenes

    http://localhost/nocache_01.swf points to http://localhost/main.swf
    http://localhost/nocache_02.swf points to http://localhost/main.swf
    etc…

Leave a Reply

Your email address will not be published. Required fields are marked *

Wrap your code before posting! Click the links below:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">