Existing App does not get Service Worker capabilities

[bogacg]

Versions

Angular CLI: 1.6.0
Node: 9.2.0
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.6.2
webpack: 3.10.0

Repro steps

Have an existing app with no PWA capability and apply steps to upgrade it as described in docs.

Observed behavior

Despite the fact it builds with no error and dist folder has files like ngsw.json & ngsw-worker.js as expected, they are not loaded on network request when browsed. (Tested with incognito mode as well)
No service-worker effect at all in app.

Desired behavior

Service Worker added to built app when steps in official docs are applied.

Mention any other details that might be useful

On the same machine, a new app generated with Angular-CLI 1.6.0 with --service-worker flag. That app loads service worker as expected.

[sntmrtn]

Same problem, with same versions.

[alxhub]

Hello, @bogacg, @sntmrtn.

Can you confirm you've followed the guide, in particular with respect to step 3: https://angular.io/guide/service-worker-getstart#step-3-import-and-register-the-service-worker

[sntmrtn]

Hello @alxhub

I can confirm I followed the guide. Only piece of code which differs on my side is this part:

providers: [
    CheckForUpdateService,
    LogUpdateService,
    PromptUpdateService,
  ]

which I excluded.

[alxhub]

Hi @sntmrtn,

Can you publish a repo which reproduces the problem?

Thanks,
Alex

[bogacg]

@alxhub I confirm I've followed those steps, I can not publish that repo, it's an app for a client.

[bjornharvold]

I am seeing the same. I followed the guide to the T but service worker won't load.

[sntmrtn]

@alxhub Please see the following repo:

https://github.com/sntmrtn/testsw

[alxhub]

@sntmrtn thanks for the reproduction!

Can you confirm exactly what steps you're taking to build and serve the project, where you would expect to see the Service Worker?

As mentioned in the documentation, ng serve --prod will not cause a Service Worker to be registered, only a true ng build --prod will run the SW build step and produce a dist directory with the Service Worker configured. When I build and serve this app (via ng build --prod and http-server), the SW is registered and activated as expected.

[sntmrtn]

Hi @alxhub

First, thanks a lot for your help!

I confirm that I build the project through ng build --prod. I then serve the dist folder with http-server as suggested in the guide.

I expect to see the SW registered and activated in the "Application" tab of Chrome devtools, but nothing shows up.

From my terminal:
MacBook-Air:testsw sntmrtn$ ng build --prod
Date: 2017-12-09T08:08:45.452Z
Hash: fe12f6c535c8e1842392
Time: 29354ms
chunk {0} polyfills.169c804fcec855447ce7.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.d0d19976182286b68554.bundle.js (main) 171 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.92d63502b90fcb9628dd.bundle.js (inline) 1.45 kB [entry] [rendered]
MacBook-Air:testsw sntmrtn$ cd dist/
MacBook-Air:dist sntmrtn$ http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.178.27:8080

And the result:

EDIT: It actually works on https, see: https://dist-zobmrubhnx.now.sh/

However, I still did not manage to make it work on my client's project.

[djfishe]

I have the same issue for an existing app. I followed the steps mentioned on https://angular.io/guide/service-worker-getstart but still no luck :(

[Stouffi]

I encountered also this issue on my existing app. So I tried to generate a new app like so

ng new my-project --service-worker

and after a ng build --prod it did work as expected, the service worker is registered and visible in the dev tools.

Then I tried to generate a new app like so

ng new my-project

I then followed the steps described in the guide and it did also work as expected.
So I decided to dig deeper in my own app.
After removing some code, I was able to get a service worker running and it appeared that it was due to a conflict with Pusher from the pusher-js package.

@Injectable()
export class SearchService {
  // having this assignment in a service class injected in a component in use at the startup of the app
  // makes the service worker not running (and not visible in the service worker list of the dev tools)
  pusher = new Pusher('key', { cluster: 'eu' })
  // after removing this line and doing an `ng build --prod` the service worker was running as expected.
  ...
}

I have no ideas what could be the root cause of this interaction between this line of code and the service worker as no errors are thrown in the console neither at compile time nor at runtime, but maybe this experience could help solving this issue.

The last thing I did is moving the assignment in a method that is never called at the startup of the app so I could have both a service worker registered and an instance of Pusher running.

[deftomat]

The same here...
I find out that service-worker is not registered after I inject AngularFirestore from angularfire2/firestore to a component or a service.

See angular/angularfire#1347

[dirand]

Service worker won't run because of ng app is not stable (ApplicationRef.isStable (https://angular.io/api/core/ApplicationRef#members), application is not becoming stable if there is a code which runs intervals (setInteral or Observable.timer and etc. which come from setInterval or setTimeout (related with NgZone.hasPendingMicrotasks)).

As example of such behaviour:

1. Generate app ng new my-project --service-worker;
2. First ensure what service-worker works as expected;
3. Then add to app.component.ts constructor setInterval(t => { console.log('Ping')}, 500);
4. Try run app again - you will see what service-worker will stops to work

Workaround for such behaviour wrap - wrap all timer-code to this.applicationRef.isStable.subscribe(isStable => { if (isStable) { <code goes here> } })

Full code

import 'rxjs/add/observable/interval';
import { Component, ApplicationRef, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  constructor(private applicationRef: ApplicationRef) {
  }

  ngOnInit() {

    this.applicationRef.isStable.subscribe((s) => { // #1
      if (s) { // #2
        setInterval(t => { console.log('Ping')}, 500);
      } // #3
    }); // #4
    // If you uncomment 1-4 - service-worker will not run

    this.applicationRef.isStable.subscribe(t => {
      console.log('App stable: ' + t);
    });
  }
}

[Argentan]

I also had this issue, the culprit seams to be angularFire2. I worked around it by registering the service worker in main.ts.

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