Disable browser caching for specific files or folders
2 min read
It’s not uncommon needing to disable browser caching of some specific files or entire folders on your website or in your web application. Sometimes you need the user’s browser to not cache some specific files and always try to retrieve them from the server. I recently needed to do this while working with the HTML5 application cache to ensure that the browser updated all files listed in the manifest file when the manifest was updated.
There are two simle ways to achieve this.
Solution 1: Add a separate Web.config for each folder
If you want to disable caching of all files in a folder and its subfolders you can add a
Web.config in the root folder you want to disable browser caching for. Say you wanted to disable browser caching for the files in the folder
js/nocache and all subfolders, then you would place the Web.config here:
Add the following to the
Web.config to disable browser caching.
<configuration> <system.webServer> <staticContent> <clientCache cacheControlMode="DisableCache" /> </staticContent> </system.webServer> </configuration>
The content of the
Web.config file is inherited for all subfolders.
Solution 2: Add the settings to the default Web.config
Another way is to add the settings directly to the default
Web.config of your project. This also enables you to control the browser caching for single files.
<configuration> <!-- Specific file --> <location path="manifest.appcache"> <system.webServer> <staticContent> <clientCache cacheControlMode="DisableCache" /> </staticContent> </system.webServer> </location> <!-- Folder including subfolders --> <location path="js/nocache"> <system.webServer> <staticContent> <clientCache cacheControlMode="DisableCache" /> </staticContent> </system.webServer> </location> </configuration>
The second part of this solution has the exact same results as the first solution.
By setting the
<clientCache cacheControlMode="DisableCache" /> the server will add a few headers to the HTTP response instructing the browser to not cache the responses.
Here’s an example of an HTTP response after our changes:
HTTP/1.1 200 OK Cache-Control: no-cache Last-Modified: Wed, 01 Oct 2014 14:18:11 GMT ETag: "b198e28782ddcf1:0" Content-Type: text/css Accept-Ranges: bytes Date: Wed, 01 Oct 2014 14:25:43 GMT Content-Length: 26685
The three headers,
ETag, have now been added and tells the browser to not cache the response.