Click here to Skip to main content
13,055,047 members (61,616 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 11 Feb 2014

Prevent Browser Caching of CSS and JavaScript Files

, 11 Feb 2014
Rate this:
Please Sign up or sign in to vote.
How to 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

   < 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)'
  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("")]
[assembly: AssemblyFileVersion("")]

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.



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


About the Author

Denmark Denmark
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralThanks! Pin
Vicent O.29-Jul-15 22:01
memberVicent O.29-Jul-15 22:01 
QuestionPrevent browser caching of css and javascript files Pin
Member 1136930512-Jan-15 17:45
memberMember 1136930512-Jan-15 17:45 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 11 Feb 2014
Article Copyright 2014 by harleydk
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid