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

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?

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>

None of these answers worked for me because, as @MichailMichailidis mentioned, "all of the requests in an SPA have virtual urls and don't map to real location paths", so location path never matches index.html.

I found the solution in this blog post, which links to this answer. Both show you how you can use rewrite module's outboundRules to change the cache-control response header based on a condition.

So this is what my web.config looks like after this configuration:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <outboundRules>
        <rule name="RewriteCacheControlForIndexHtmlFile" 
          preCondition="IsIndexHtmlFile">
          <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
          <action type="Rewrite" value="max-age=0" />
        </rule>
        <preConditions>
          <preCondition name="IsIndexHtmlFile">
            <add input="{REQUEST_FILENAME}" pattern="index.html" />
          </preCondition>
        </preConditions>
      </outboundRules>
...

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">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="pragma" content="no-cache">

Place these meta tags between <head> and </head> in index.html directly. Of course, you can place these tags in any html file you want to ask the browser not to cache. The meta tags are specific to whatever file or files you manually add them to.

For my case none of previous answears worked, but I found another way, by filter by response content type.

Just add below to web.config

...
<system.webServer>
    <rewrite>
        <outboundRules>
            <rule name="RewriteCacheControlForHtmlFile" preCondition="IsHtmlFile">
                <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
                <action type="Rewrite" value="no-store, max-age=0" />
            </rule>
            <preConditions>
                <preCondition name="IsHtmlFile">
                    <add input="{RESPONSE_CONTENT_TYPE}" pattern="html$" />
                </preCondition>
            </preConditions>
...