Angular 7 - service worker not registered

24
votes

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
angularangular-cliservice-workerprogressive-web-appsangular7
have yout ried using firefox? Are you trying to cache dynamic assets or urls? - ams
Because for now I tried just to make basic functionality work, you can see what should be cached by default here angular.io/guide/… - tzm
@tmz Yes, I understand. Have you tried using firefox to see if there is a service worker? Does your site have static content or only dynamic content? - ams
@ams I havent tried to use firefox, but I don't believe that this problem is related with chrome browser. Both, static/dynamic content. - tzm

3 Answers

43
votes

It seems the service worker setup is broken for the @angular/[email protected]:

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

33
votes

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.

7
votes

Be aware that browsers does not register service workers for HTTP unless it's localhost.

Running http-server, the console showed that the application will be served from the following URLs: http://10.40.59.29:8080, http://127.0.0.1:8080, http://192.168.255.209:8080.

Don't forget to replace the IP address to localhost like http://localhost:8080/