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

did you manage to solve the issue? I seem to face a same one and looking for a solution — nitoloz, Sep 30 '20 at 14:49
@nitoloz see my answer, but for newer Angular it might be different, since service worker changed too — Akxe, Apr 05 '22 at 13:50

score 3 · Answer 1 · answered Dec 02 '20 at 04:16

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.

score 1 · Answer 2 · answered Jul 01 '21 at 22:19

1

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...

answered Jul 01 '21 at 22:19

Akxe

9,694
3
36
71

I think this is what's been happening to me. Check out https://stackoverflow.com/questions/71698453/angular-material-roboto-font-disrupting-service-worker – Willie Apr 04 '22 at 22:53
I am using the angular docs recommended way of checking for the update, and it constantly fires every minute...even though there is no update. – Willie Apr 04 '22 at 22:53

Francesco · Answer 3 · 2020-09-30T10:21:52.223

0

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.

edited Sep 30 '20 at 10:21

answered Jul 23 '20 at 08:33

Francesco

9,947
7
67
110

1

I have added the ngsw-config.json in the description and added devtool screen shot. Yes the ngsw-worker.js is correctly registered both in offline and online mode. Also the project is deployed in dev server for testing and able to install/add the app. But once we turn on offline the page is responding with HTTP 504 error and Page not found. When we check network, ngsw-cache-bust-failing. – user3036042 Jul 23 '20 at 10:47
@user3036042 did you manage to solve the issue? I seem to face a same one and looking for a solution – nitoloz Sep 30 '20 at 08:08

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

3 Answers3

Linked