Click here to Skip to main content
11,432,427 members (64,079 online)
Click here to Skip to main content
Technical Blog

Tagged as

Prevent browser caching of css and javascript files

, 11 Feb 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
A modern browser will attempt to cache content as best 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 ho

A modern browser will attempt to cache content as best 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

harleydk

Denmark Denmark
No Biography provided

Comments and Discussions

 
QuestionPrevent browser caching of css and javascript files Pin
Member 1136930512-Jan-15 18:45
memberMember 1136930512-Jan-15 18:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150428.2 | Last Updated 11 Feb 2014
Article Copyright 2014 by harleydk
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid