0

My angular 7 website, as far as I know has all the cache busting methods in place, but still there are a few users who don't get the new version of the site each time I do a release.

I've put a test in the index.html file so that it calls a web service to log a message, and when I release a new version of the website with a different message in the index.html, I still see the old message appearing in the log. Mostly seems to be iPhones on Safari 12 and 13 according to the user agent details.

I've been changing the url each time I've done a release to let the browsers load the new file, and this does work but it's not a solution I can maintain in the long term.

Is there anything else I can do ensure the index.html does not get cached? The .js files that are generated have a unique suffix added (eg. main.5ca2af62205176640ee1.js) and the http response headers include the no-cache header.

I'm using IIS 8.

This is my web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
    </staticContent>
    <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>
      <outboundRules>
        <rule name="RewriteCacheControlForHTMLFiles" preCondition="FileEndsWithHtml">
          <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
          <action type="Rewrite" value="max-age=0" />
        </rule>
        <preConditions>
          <preCondition name="FileEndsWithHtml">
            <add input="{REQUEST_FILENAME}" pattern="\.html$" />
          </preCondition>
        </preConditions>
      </outboundRules>
    </rewrite>    
  </system.webServer>
</configuration>

And this is the section of my angular.json file:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/myoutputdir",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/web.config",
          {
            "glob": "**/*",
            "input": "./node_modules/leaflet/dist/images",
            "output": "leaflet/"
          }
        ],
        "styles": [
          "src/styles.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
          "node_modules/leaflet/dist/leaflet.css"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.min.js"
        ],
        "es5BrowserSupport": true
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ]
        }
      }
    },
fosbie
  • 852
  • 1
  • 11
  • 21
  • try this should work in your case https://stackoverflow.com/a/57986228/9042256 – Ramesh Mar 24 '20 at 11:55
  • That link is for Apache, but there is a link off that for IIS. I've given it a try but will be a while before I know if it's worked as I'm struggling to reproduce the issue, it only happens on some devices – fosbie Mar 25 '20 at 16:08

0 Answers0