Search code examples
javascriptcaching

Aggressive JavaScript caching

I've run into a problem where I make changes to a few JavaScript files that are referenced in an HTML file, but the browser doesn't see the changes. It holds onto the copy cached in the browser, even though the web server has a newer version.

Not until I force the browser to clear the cache do I see the changes.

Is this a web-server configuration? Do I need to set my JavaScript files to never cache? I've seen some interesting techniques in the Google Web Toolkit where they actually create a new JavaScript file name any time an update is made. I believe this is to prevent proxies and browsers from keeping old versions of the JavaScript files with the same names.

Is there a list of best practices somewhere?

Solution

  • We append a product build number to the end of all Javascript (and CSS etc.) like so:

    <script src="MyScript.js?4.0.8243">

    Browsers ignore everything after the question mark but upgrades cause a new URL which means cache-reload.

    This has the additional benefit that you can set HTTP headers that mean "never cache!"