Cache-Control header for Azure Webapps

Setting the Cache-Control http header to no-cache for Azure Webapps can be a confusing topic, because the documentation doesn’t really provide the missing link between WebApps, the settings you can set directly via AppSettings in the WebApps and settings available in web.config which are more related to the documentation given at the IIS server. In this post I shall present the different settings and finally a web.config file which sets the Cache-Control header to no-cache for all requests for static files.

Available AppSettings

In general, all available settings related to caching for WebApps can be found at Microsoft Learning.

Things I noted down as probably good to know:

• In some scenarios, it might make sense to disable dynamic caching, e.g. when the timestamps are not refreshing correctly when files are modified. To do this, set WEBSITE_DYNAMIC_CACHE to 0. Most of the time this should not be an issue, as this should be really easy identifiable by investigating the requests in Developer Tools and checking the timestamps in the response headers. I found that this setting doesn’t add or change the Cache-Control header.
• WEBSITE_LOCAL_CACHE_OPTION is another interesting one, it should not be enabled by default, so we don’t have to bother with that normally. Local cache is a separate topic all-together. If you want to learn more about Local Cache for WebApps, please refer to this Microsoft Learning page. If you use it, it might produce different issues when we later introduce a web.config to have a no-cache header present in the WebApps response headers. So please be aware.

Setting CacheControl in web.config

A working way to force the WebApp to return no-cache is to use the clientCache tag in web.config. You can find the documentation for this tag here.

The following example lets you know where you have to add the tag and which setting needs to be set for it to deliver no-cache as result: cacheControlMode must read DisableCache.

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" 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>
   <staticContent>
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
</system.webServer>
</configuration>

Note: This is a pretty good working web.config for Angular apps. So if you ever needed that - you are welcome :D

Final Thoughts

The web.config should provide the Cache-Control header to all static content running at your WebApp. This does not work for applications running actual code on the server-side, like a .NET or Node.JS application. In this case you will have to set the Cache-Control header directly in your application. Please refer to the documentation of the framework you used for that.