I have a single page application (angular-js) which is served through IIS. How do I prevent caching of HTML files? The solution needs to be achieved by changing content within either index.html or the web.config, as access to IIS through a management console is not possible.
Some options I am currently investigating are:
- web.config caching profiles - http://www.iis.net/configreference/system.webserver/caching
- web.config client cache - http://www.iis.net/configreference/system.webserver/staticcontent/clientcache
- meta tags - Using <meta> tags to turn off caching in all browsers?
IIS is version 7.5 with .NET framework 4
Adding the following into web.config
solution worked across Chrome, IE, Firefox, and Safari:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<location path="index.html">
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Cache-Control" value="no-cache" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
</configuration>
This will ensure that the that Cache-Control
header is set to no-cache
when requesting index.html
.
For .NET Core, I used the following.
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = context =>
{
if (context.File.Name == "index.html" ) {
context.Context.Response.Headers.Add("Cache-Control", "no-cache, no-store");
context.Context.Response.Headers.Add("Expires", "-1");
}
}
});
Credit to How to disable browser cache in ASP.NET core rc2?
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
When serving your html files, you can append a random query string. This will prevent the browser from using the old versions even if the file is in the browser cache.
/index.html?rnd=timestamp
The other option is to add the no-cache setting at IIS level. This adds Cache-Control: no-cache in the response which tells browsers to not cache the file. It works from IIS 7 onwards.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<!-- Note the use of the 'location' tag to specify which
folder this applies to-->
<location path="index.html">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
</location>
</configuration>
Adding the following into web.config solution worked across Chrome, IE, Firefox, and Safari:
This will ensure that the that Cache-Control header is set to no-cache when requesting index.html.