27

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",
tzm
  • 588
  • 1
  • 12
  • 27
  • have yout ried using firefox? Are you trying to cache dynamic assets or urls? – ams Nov 16 '18 at 10:11
  • Because for now I tried just to make basic functionality work, you can see what should be cached by default here https://angular.io/guide/service-worker-getting-started#whats-being-cached – tzm Nov 16 '18 at 10:15
  • @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 Nov 16 '18 at 10:17
  • @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 Nov 28 '18 at 18:57

4 Answers4

44

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

Jscti
  • 14,096
  • 4
  • 62
  • 87
artemisian
  • 2,976
  • 1
  • 22
  • 23
  • broken in CLI: 7.3.1 also – dman Apr 17 '19 at 19:54
  • 2
    which @angular/cli version is stable so that we can use service worker – JustCode May 27 '19 at 13:51
  • 1
    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. – Janne Harju Jul 09 '19 at 14:23
  • new issue created, hope it won't get closed this time : https://github.com/angular/angular-cli/issues/15025 – Jscti Jul 10 '19 at 08:09
  • 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](https://github.com/angular/angular/blob/master/packages/service-worker/src/module.ts#L46-L71) – Joshua Chan Aug 03 '19 at 16:20
  • Exactly. The service worker doesn't register in Angular v8 as well. And this fix did not work in my case. – Akshay Raut Sep 28 '19 at 14:32
  • 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. – Akshay Raut Sep 28 '19 at 16:06
39

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.

Elger Mensonides
  • 6,930
  • 6
  • 46
  • 69
  • 4
    It's a handy tip but only became available in Angular V8. – MortimerCat Aug 27 '19 at 10:57
  • 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 Oct 14 '19 at 20:16
  • 2
    **Update**: I actually didn't need that option anymore when I replaced all my `setInterval(...)`'s with rxjs' `timer(...)` ! https://www.learnrxjs.io/operators/creation/timer.html – ravo10 Oct 14 '19 at 20:38
  • 1
    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 https://github.com/angular/angular-cli/issues/13351, but they locked the issue! :-( – KTCO Oct 21 '19 at 18:53
12

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/

emanuel.virca
  • 598
  • 1
  • 6
  • 13
  • 2
    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 – Kevin Guanche Darias Jun 06 '20 at 10:11
0

what worked for me was to edit this line: '!isDevMode()' to 'isDevMode()' so that it registers in the localhost which is in dev mode.

    ServiceWorkerModule.register('ngsw-worker.js', {
      // enabled: !isDevMode(),
      enabled: true,
      registrationStrategy: 'registerWhenStable:30000'
      // registrationStrategy: 'registerImmediately'
    }),
Zaffer
  • 1,290
  • 13
  • 32