Angular 7 - service worker not registered

angular angular-cli service-worker progressive-web-apps angular7

22,150

Solution 1

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

Solution 2

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.

Solution 3

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/

22,150

tzm

I'am noob

Updated on March 11, 2020

Comments

tzm about 4 years
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",
```
- ams over 5 years
  
  have yout ried using firefox? Are you trying to cache dynamic assets or urls?
- tzm over 5 years
  
  Because for now I tried just to make basic functionality work, you can see what should be cached by default here angular.io/guide/…
- ams over 5 years
  
  @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?
- tzm over 5 years
  
  @ams I havent tried to use firefox, but I don't believe that this problem is related with chrome browser. Both, static/dynamic content.
Joseph Genchik over 5 years

Thank you so much for the workaround!!! I spent many hours debugging this. BTW, I had encountered this problem even before version 7.
dman about 5 years

broken in CLI: 7.3.1 also
JustCode almost 5 years

which @angular/cli version is stable so that we can use service worker
Janne Harju almost 5 years

I think it is not about that serviceworker is broken. I believe that your application is not stable. For example setinterval or settiemout will broke angular stablity. You should use something else than those.
Jscti almost 5 years

new issue created, hope it won't get closed this time : github.com/angular/angular-cli/issues/15025
Joshua Chan almost 5 years

Just want to mention that these issues happens mostly because your angular app is unstable, due to things like setInterval. Since Angular 8, we are given the option to use a different registrationStrategy which solves this problem. In app.module.ts, use ServiceWorkerModule.register('ngsw-worker.js', { registrationStrategy: 'registerWithDelay', enabled: environment.production }) You can check out the code documentation in GitHub
MortimerCat over 4 years

It's a handy tip but only became available in Angular V8.
Akshay Raut over 4 years

Exactly. The service worker doesn't register in Angular v8 as well. And this fix did not work in my case.
Akshay Raut over 4 years

Update on previous comment : The service worker doesn't register in Angular v8 as well. And this fix works with deployment on IIS but not with http-server CLI.
ravo10 over 4 years

Saved me. Thanks
ravo10 over 4 years

Awesome. I could not figure out why the service worker wouldn't register. I have stuff that I need to use an infinite interval/function for so...
ravo10 over 4 years

Update: I actually didn't need that option anymore when I replaced all my setInterval(...)'s with rxjs' timer(...) ! learnrxjs.io/operators/creation/timer.html
KTCO over 4 years

Thank you so much for this answer!!! I'm using oidc client and couldn't figure out why it wouldn't register. I wanted to give your GitHub answer thumbs up github.com/angular/angular-cli/issues/13351, but they locked the issue! :-(
Kevin Guanche Darias almost 4 years

In Google Chrome you can set trusted origins for testing in chrome://flags/#unsafely-treat-insecure-origin-as-secure It's way useful if you use the Angular behind a dockered nginx service