Prevent Browser Caching of CSS and JavaScript Files

A modern browser will attempt to cache content as best as it can, to make for a better end-user experience. This works well, but we may run into issues when we deploy a set of different files to the server, yet the client browser insists on serving up the old ones out of its cache.

So here's a tip on how to force the client browser to reload newly deployed files. You can use this with any kind of content file served over an http connection, be it CSS-files, JavaScript files, you name it.

The trick is to add an updated querystring value to the content URL. For example, instead of:

< link media='screen and (max-width: 2560px)' href="~/Content/Site.css" rel="stylesheet" />

... we go ...

< link media='screen and (max-width: 2560px)' 
href="~/Content/Site.css?v=1.0.4034.343343" rel="stylesheet" />

... instead. With each deployment, the 'v' value changes, which will force the client into retrieving a new version of the file on the server.

I'm myself adding the assembly version into the URL. I'm specifically doing this, which works with the ASP.NET MVC framework:

@{
       string versionId = System.Reflection.Assembly.GetAssembly
       (typeof(timeRegistrering.Web.Controllers.HomeController)).GetName().Version.ToString();
   }

   < link media='screen and (max-width: 2500px)' href="~/Content/Site.css?v=@{@versionId}"
     rel="stylesheet" />

The above will render as follows into the browser:

< link media='screen and (max-width: 2500px)'
  href="http://www.codeproject.com/Content/Site.css?v=1.0.4996.19123"
  rel="stylesheet" />

As the assembly version changes with every build or publish, the URL will change accordingly - and the content will be retrieved 'fresh' from the server, as now the client can no longer find the old version with a different version number.

In order to make your assembly version number auto-increment, you'll want to change the following lines in your 'assemblyInfo.cs' file (as found in the 'Properties' folder in your project):

// You can specify all the values or you can default the Build and Revision Numbers 
// by using the '*' as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.1")]
[assembly: AssemblyFileVersion("1.0.0.1")]

Should be changed to:

// You can specify all the values or you can default the Revision and Build Numbers 
// by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyFileVersion("1.0.*")]

The asterix '*' sign will be replaced with the assembly number automatically, to increment on each build/publish.

HTH.