@angular/service-worker not working when offline

Question

I never got the service worker from Angular Mobile Team to work properly and at this point I guess I forgot to enable something, because it never worked since the initial release. Even if it installs and run on Google Chrome (smartphone & desktop) when I go offline it doesn't work anymore, also it randomly crashes after updates.

There is no documentation on how to set it up. So here is how I did it:

ng new test-service-worker
npm install @angular/service-worker
in .angular-cli.json, I add "serviceWorker": true
npm build --prod, output ngsw-manifest.json sw-register.b73048fe3d9f8a1e7ae5.bundle.js and worker-basic.min.js. So everything seems ok
https://test-service-worker-97321.firebaseapp.com/ the SW installs
If I go offline, wait an hour for cache to expire (or simply disable cache), I get a failed to load error, no matter the device I use.

The generated dist directory:

The generated ngsw-manifest.json:

The service worker installed and running: Test available https://test-service-worker-97321.firebaseapp.com/

When I set the chrome devtools options to Offline and Disable cache the service worker doesn't load content anymore. A good example of how it is supposed to work is Twitter, their web app works when Offline and Disable cache are checked.

NB: I created a few apps before with service workers, and they worked properly on Chrome. I don't know what I'm doing wrong here.

Maxim Salnikov · Accepted Answer · 2017-03-26 22:21:08Z

11

You have to test your app in offline mode with an explicit mentioning of index.html. I checked https://test-service-worker-97321.firebaseapp.com/index.html - it works fine.

If you wish your app to work in offline without index document mentioned (and for all other routes), you have to set up route redirection

See the example. This custom ngsw-manifest.json will be merged with auto-generated one during the build.

edited Mar 26, 2017 at 22:21

answered Mar 26, 2017 at 22:13

Maxim Salnikov

7341 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

seawave_23 Over a year ago

but now, since the ngsw-manifest.json is not available anymore (Angular v5), how would I define the routes? Or do I not need to anymore?

Maxim Salnikov Over a year ago

@Nadine ngsw-manifest.json changed its name and format (slightly) and the way it's processed - now it's ngsw-config.js: angular.io/guide/service-worker-config

seawave_23 Over a year ago

Is "routing" then still existing as part of the config or not?

Maxim Salnikov Over a year ago

@Nadine: Not. Now we have a way more flexible config with assetGroups for app shell and dataGroups for API calls (and other runtime requests)

Jack Koppa · Accepted Answer · 2018-02-11 21:45:58Z

With Maxim's help, I followed the same path as asking person, managed to add offline capability to the existing static web and deploy it on Firebase. The custom manifest on root folder should look like below, they will eventually be merged with autogenerated manifest:

{
  "routing": {
    "index": "/index.html",
    "routes": {
      "/": {
        "prefix": false
      },
      "/home": {
        "prefix": false
      },
      "/work": { // any routes starting with '/work'
        "prefix": true
      }
    }
  },
  "external": {
    "urls": [
      {
        "url": "https://fonts.googleapis.com/css?family=Quicksand"
      }
    ]
  }
}

Collectives™ on Stack Overflow

@angular/service-worker not working when offline

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related