Angular PWA has issues updating when not root

Question

I have a series of websites that are independent websites, that I want to use the angular PWA features for.

The navigation urls are somedomain.com/c/index.html, somedomain/a/index.html and so forth.

I am running in production, with HTTPS, and the browser is correctly seeing the PWA and I get all green checks when using lighthouse to check the PWA.

When the PWA goes to update, I get a hash-mismatch error on the index.html because instead of trying to load somedomain.com/c/index.html it loads somedomain.com/index.html. How can I configure it to load subsequent update/files

manifest.webmanifest (icon list abbreviated for brevity)

{
  "name": "Portal",
  "short_name": "Portal",
  "theme_color": "#324862",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/c/",
  "start_url": "/c/",
  "icons": [
    {
      "src": "assets/icons/71x71-icon.png",
      "type": "image/png",
      "sizes": "71x71",
      "purpose": "any"
    }
}

ngsw-config.json

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

Here is the error I see

Hash mismatch (cacheBustedFetchFromNetwork): https://somedomain.com:3000/index.html: expected 77751a4886a060e0dcd0b05b41867bfdc63aa111, got 31c534f32f2fbb4eb085824cd93a4ae15ff20cd9 (after cache busting) Error: Hash mismatch (cacheBustedFetchFromNetwork): https://somedomain.com:3000/index.html: expected 77751a4886a060e0dcd0b05b41867bfdc63aa111, got 31c534f32f2fbb4eb085824cd93a4ae15ff20cd9 (after cache busting) at PrefetchAssetGroup.cacheBustedFetchFromNetwork (https://somedomain.com:3000/c/ngsw-worker.js:474:21) at async PrefetchAssetGroup.fetchFromNetwork (https://somedomain.com:3000/c/ngsw-worker.js:449:19) at async PrefetchAssetGroup.fetchAndCacheOnce (https://somedomain.com:3000/c/ngsw-worker.js:428:21) at async https://somedomain.com:3000/c/ngsw-worker.js:528:9 at async https://somedomain.com:3000/c/ngsw-worker.js:519:9 at async https://somedomain.com:3000/c/ngsw-worker.js:519:9 at async https://somedomain.com:3000/c/ngsw-worker.js:519:9 at async https://somedomain.com:3000/c/ngsw-worker.js:519:9 at async https://somedomain.com:3000/c/ngsw-worker.js:519:9 at async PrefetchAssetGroup.initializeFully (https://somedomain.com:3000/c/ngsw-worker.js:518:7)

Note it trying to get the file at /index.html, /c/index.html

Hopefully I haven't missed anything as I have been researching this on SO and on github/the interwebs for a few days.

Thanks

Angular PWA has issues updating when not root

0 Answers0