Angular 7 - service worker not registered

Viewed 23483

I did everything as written in "https://angular.io/guide/service-worker-getting-started" to make my application PWA.

Used exactly this commands:

ng add @angular/pwa

npm install http-server -g

ng build --prod

http-server -p 8080 -c-1 dist

Then I opened this url on Chrome (in incognito)

http://127.0.0.1:8080

When I open tools for developers (f12) > Applications > Service Workers there is no service worker available and website don't work when I set offline there.

Additional info about my angular app:

package.json: (the most important ones)

"@angular/core": "^7.0.2",
"@angular/pwa": "^0.10.6",
"@angular/service-worker": "^7.0.4",
"@angular-devkit/build-angular": "^0.10.6",
"@angular/cli": "^7.0.6",
3 Answers

It seems the service worker setup is broken for the @angular/cli@7.1.4:

As a temporary solution you can register it manually yourself by modifying the file src/main.ts (Once fixed you can remove the manual service worker registration.):

.....

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

PS: Github issue created: https://github.com/angular/angular-cli/issues/13351

PS: Github issue #2 created: https://github.com/angular/angular-cli/issues/15025

artemisian's solution works but it's a hack, and you're not sure if it will work in the future.

A better solution

There is a 'registrationStrategy' setting which has to do with angular waiting with the registration until your app is 'stable'. Now if you have a bunch of stuff loading while starting your app (authenticating and building websocket connections) angular apparently thinks your app never is stable.

Fortunately you can override the registrationStrategy to registerImmediately like so:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }),

See for the documentation here

After this the serviceworker will load, whatever the state of your app. There's also an option to pass an observable, so you can have it loaded whenever you think it's right.

Related