Lately, I was in conversation with our QA lead, which made us realize of an issue that, certainly will cause inconvenience to the end users of the web application on which we are working on. Although the issue is very much common and is to be faced by all web developers, though it came late to me, I would defend myself by saying, ‘better late than never’.
Now the problem,
Well we can think of browser caching to be the culprit, but getting rid of that will impact page performance. Every time the page request is made, the browser will pull the same js and cs files. Or, we can think of expiring the files at some particular date in future. We can implement this both at page level or at server level.
For IIS 7,
- In “Features View”, double-click “HTTP Response Headers”.
- On the “HTTP Response Headers” page, in the “Actions” pane, click “Set Common Headers”.
- In the “Set Common HTTP Response Headers” dialog box, select the “Expire Web content” check box and select one of the following options:
- Select “Immediately” if you want content to expire immediately after it is sent in a response, that is no caching.
- Select “After” if you want the content to expire periodically. Then, in the corresponding boxes, type an integer and select a time interval at which content expires.
- Select “On (in Coordinated Universal Time (UTC))” if you want the content to expire on a specific day and at a specific time. Then, in the corresponding boxes, select a date and time at which the content expires.
This solution will work pretty well. But, how about mixing both the solutions. Letting the user’s get the new files when they are ready and the same time leverage the cache option also. We can achieve that in two ways:
- Either we can add the SVN version number / build number as query string.
<link type="text/css" rel="stylesheet" href="css/base.css?v=000">
The trick over here is, to change the number each time you update the CSS file to make sure the browser always downloads the new code. When a browser checks if it has anything cached it compares the file names. Now as browser will treat “base.css?v=000″ and “base.css?v=001″ differently, so it will download the new CSS file.
- Or, we can make the SVN version number / build number as part of the file name itself.
<link type="text/css" rel="stylesheet" href="css/base_000.css">
I prefer the later one, to be sure enough that the files are getting cached. As, although I don’t have the list of proxies, but have read, that a certain proxies do ignore the query string part of the url.
Filed under: Web Development