Angular Service Worker not Working for Navigation URLs (offline mode)

Question

I have below Angular Service Worker config file, which seems to be working fine for the api requests and static contents, but for the navigation urls it's not hitting the cache. For example if I open, www.mydomain.com or www.mydomain.com/section or www.mydomain.com/account/section, the request goes to the server instead of being resolved locally, as a result the offline version of the app doesn't work.

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/index.html",
          "/manifest.json",
          "/favicon.ico",
          "/*.css",
          "/runtime-es2015*.js",
          "/polyfills-es2015*.js",
          "/main-es2015*.js",
          "/common-es2015*.js",
          "/content/images/header-pattern.png",
          "/content/fonts/roboto-v20-latin-regular.woff2",
          "/content/fonts/raleway-v14-latin-regular.woff2",
          "/content/fonts/material-icons.woff2",
          "/content/images/logo-round-toolbar.png",
          "/content/images/facebook.png",
          "/content/images/linkedin.png",
          "/content/images/twitter.png"
        ]
      }
    },
    {
      "name": "app-lazy-assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/*.js",
          "/content/**"
        ],
        "urls": [
          "https://cdnjs.cloudflare.com/**",
          "https://fonts.googleapis.com/**",
          "https://fonts.gstatic.com/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "my-api-30days",
      "urls": [
        "/api/url/part/*",
        "/api/url/*",
        "/api/url/segment/*"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 300,
        "maxAge": "30d"
      }
    },
    {
      "name": "my-api-5days",
      "urls": [
        "/api/account/5dayscacheurl"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 300,
        "maxAge": "5d"
      }
    }
  ],
  "navigationUrls": [
    "/**",
    "!/**/*.*",
    "!/**/*__*",
    "!/**/*__*/**",
    "!/bypass/service/worker",
    "!/account/bypass-service-worker**",
    "!/bypass-service-worker**"
  ]
}

Can anyone please guide if I am missing something?

I have also gone through @angular/service-worker not working when offline but it seems that the answer doesn't apply to the latest version of Angular.

Is this tested in production? Don't forget the whole caching/pwa/serviceworker only works in production and being served (no localhost) — user3791775, May 09 '20 at 23:26
Have you looked into Google Workbox? They have made a nice Service Worker package that makes configuration very simple. — user1779362, May 10 '20 at 06:43
The issue was due to hash mismatch for index.html and service worker file https://github.com/angular/angular/issues/23613 — Naveed Ahmed, May 10 '20 at 15:36

score 1 · Answer 1 · answered May 10 '20 at 15:35

My issues was due to hash mismatch for index.html and service worker file as reported here https://github.com/angular/angular/issues/23613, I got the issue fixed by:

Run production build.
Minify index.html file html-minifier -o dist/index.html dist/index.html --remove-comments --collapse-whitespace --minify-js --minify-css
Minify Service Worker terser dist/combined-sw.js -o dist/combined-sw.js -c --comments /^##/. (for some reason --comments false was not working so I added this --comments /^##/ to remove all comments).
Generate Service Worker config file again ngsw-config dist ngsw-config.json

Angular Service Worker not Working for Navigation URLs (offline mode)

1 Answers1