How to disable caching of single page application HTML file served through IIS?

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?

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>

  <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">

The main premise for SPA is Never cache index.html

Following the MDN recommendations to prevent caching, we must add the Cache-Control HTTP header with the no-store, max-age=0 value to the resource (the index.html file in our case).

Why no-store instead no-cache?

Whith no-store, the resource is not stored anywhere. With no-cache, the resource may be stored, but it should be validated with the server by the store before use it.

Why max-age=0?

Force to clear pre-existing valid cache responses (no-store doesn't).

In IIS we can manage our app cache configuration through the web.config file. Here is a complete web.config file (must be located in the root directory of our application) that includes the cache configuration for the index.html file as well as the routes configuration (I have added the SPA routing and the HTTP redirection to HTTPS as examples):

<configuration>
  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-store, max-age=0" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="HTTP to HTTPS" enabled="true" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
            <add input="{HTTPS}" pattern="^OFF$" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" />
        </rule>
        <rule name="SPA Routes" enabled="true" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>