Ensuring Updated CSS/JavaScript on Client Side

Question

I'm trying to ensure that visitors of my ASP.NET MVC website always have the most-current CSS and Javascript (and not some older cached version).

I tried to realize this by generating a seed value when the application domain starts, and automatically append it to the CSS and Javascript URLs (so now instead of /Content/All.js the link is /Content/All.js?549238 etc.).

Unfortunately I just found out by debugging via Firebug that this causes now a full download request every time (the new "seeded" response is no longer cached at all, but I only wanted the first check to download the 'updated' version, but then cache again/only check if there is a difference).

How can I achieve my goal, is there a better way of doing this? I need the client to always request the newest version, but then cache if no change happened.

Edit: This appears to be related to the fact that my page is served over SSL. I asked a follow up question here regarding enabling clientside caching with SSL.

Answer 1

I think the seed value you are generating is a random number. Replace this with a version number so that it will be re downloaded only when the version number of your application changes.

Like

/Content/All.js?appVer1.5

and when you modify the application you can change that to something like

/Content/All.js?appVer1.6

Answer 2

Put the revision number in the url: foo.css?rev=348

-- Edit

You can achieve this pretty trivially as well, using your build tool (I actually do it with a custom thing I've written).

-- Edit

And if it floats your boat, this is what SO does.

Answer 3

1. Use a checksum of the file's content as the number, like All-a2a69e19d8628b65cb935708d64d7337.js. This way the number only changes when the contents of the script changes.

2. Create some mechanism that is responsible for generating the link and/or <script> tag to the JavaScript file.

This way, in your ASP.NET page, have something like:

<asp:ScriptTag source="All.js"/>

Which gets replaced by:

<script src="/All-a2a69e19d8628b65cb935708d64d7337.js" type="text/javascript"></script>