ngsw.json?ngsw-cache-bust failing in offline mode of Angular 8 PWA application

Question

I am facing an issue with the service worker. The service worker is not registering on its own through the app.module. So I am manually registering it in main.ts. It works fine in online mode. But when I change the network to offline mode, getting ngsw.json?ngsw-cache-bust failing. Any solution will be helpful.

main.ts

    platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  }).catch(err => console.log(err));

ngsw-catch-bust-failing

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/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Devtool-screen-shot Devtool-screenshot-2

Answer 1

I think your problem lies somewhere else. Can you show the ngsw-config.json file?

In DevTools is the service worker correctly registered and active?

What exactly does not work as expected while offline? Is it just the ngsw.json file returning an exception while attempting to fetch it while offline?

UPDATE

How did you set the scope and start_url property in the web manifest? With the new angular CLI the values are set by default to "./" (notice the dot), while in previous versions the dot was missing and in some setups led to path issues.

Even though probably is not your case, as you can add the app to the home screen, meaning everything is properly setup.

Answer 2

This is normal behavior once offline with the Angular service worker. What's happening is the service worker is trying to do a GET on the ngsw.json file using cache-busting, but it can't access it, because the app is offline. The fetch will fail and the call will look something similar to the following with a unique value:

ngsw.json?ngsw-cache-bust=0.7064947087867681

It's trying to get the service worker configuration to see what needs updated, but can't access the file. However, this should not impede the service worker from serving up anything it's already cached, and operate normally until back online. Once online you will see the call to the ngsw.json file via a GET succeed once again.

Answer 3

For anyone seeing tons of ngsw.json?ngsw-cache-bust requests in the network panel...

So... I basically did DDoS on myself using the appRef.isStable.subscribe(() => swUpdate.checkForUpdate()); code.

It is because:

appRef.isStable is Observable<boolean>. By calling checkForUpdate, I made a request resulting in it changing from true to false thus firing once again. Then when it downloaded both files, it switched back to true thus the cycle repeat.

If only I knew that the app by default checks upon loading on its own...