Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(service-worker): does not start/install (zone not stabilizing) #20970

Closed
Ploppy3 opened this issue Dec 12, 2017 · 50 comments

Comments

@Ploppy3
Copy link

commented Dec 12, 2017

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Service worker does not start/install.

Expected behavior

Service worker should always start/install.

Minimal reproduction of the problem with instructions

  • create new project
    ng new test-service-worker --service-worker
  • add this code to the app.component's constructor:
    setInterval(function() { console.log('test'); }, 1000);
  • build app
    ng build --prod
  • service worker will never start/install

Environment


Angular version: 5.1.0
CLI: 1.6.0

@Ploppy3 Ploppy3 changed the title Service-Worker doesn't start Service-Worker doesn't start/install Dec 12, 2017

@Ploppy3 Ploppy3 changed the title Service-Worker doesn't start/install Service worker: doesn't start/install Dec 12, 2017

@alxhub alxhub added this to Backlog in Service Worker via automation Dec 12, 2017

@Ploppy3 Ploppy3 changed the title Service worker: doesn't start/install bug(service-worker): doe not start/install Dec 13, 2017

@Ploppy3 Ploppy3 changed the title bug(service-worker): doe not start/install bug(service-worker): does not start/install Dec 13, 2017

@Ploppy3

This comment has been minimized.

Copy link
Author

commented Dec 13, 2017

@alxhub Hello, do you have any ETA on this bug?

I'm also curious to know why using a setInterval could cause this issue. You may also look at the setTimeout function.

I have another project which has the a similar problem but does not use any setInterval as far as I know (maybe in the dependencies though). So it may be a wider problem.

@alxhub

This comment has been minimized.

Copy link
Contributor

commented Dec 13, 2017

Hello @Ploppy3,

There is an ongoing investigation into this issue (which affects far more than service worker - the Angular zone never becomes stable in such an app).

@skydever

This comment has been minimized.

Copy link

commented Dec 20, 2017

I run into the same problem when I use interval from
import { interval } from 'rxjs/observable/interval';
like in the service worker docs.

As a workaround I did that

this.ngZone.runOutsideAngular(() => {
  interval(ms).subscribe(() => {
    this.ngZone.run(() => this.updates.checkForUpdate());
  });
});

and everything works fine now, but this is just a workaround.

By the way, awesome service worker integration, big thx for that!

@Ploppy3

This comment has been minimized.

Copy link
Author

commented Dec 20, 2017

@skydever I implemented this already but with the regular setInterval function.

@skydever

This comment has been minimized.

Copy link

commented Dec 20, 2017

@Ploppy3 ok, good to know

seems to be related to #8089, so I am not sure if it really is just a workaround @alxhub ?

@Splaktar

This comment has been minimized.

Copy link
Member

commented Dec 30, 2017

I have been fighting this issue for ~3 months as well. My NGSW never registers and it has been almost impossible to debug.

The information here is very helpful though. I run FullStory on my site and it is extremely important to keep in place. However, it does send a POST request every few seconds. You can observe this on https://www.marketamplified.com/ using Chrome's Network tab. This would very much explain the issue that I am seeing where the NGSW never gets registered, no matter what.

I'm working on verifying this atm. I also use Firebase Auth and Firebase DB, so those may also do something to keep the page from being 'stable'.

@Splaktar

This comment has been minimized.

Copy link
Member

commented Dec 30, 2017

OK, I just verified that I had to disable both Firebase and Fullstory to get NGSW to register. After all of these months, just seeing it register finally was a great feeling! My app doesn't render on the page, but I have a SW! 😉

Of course, I can't just pull Firebase and Fullstory from my app in order to use NGSW. I also don't think that I want to run all of AngularFire2 and Firebase outside of Angular.

Is there a param that I can sent to override this behavior and force registration?

@Splaktar

This comment has been minimized.

Copy link
Member

commented Dec 30, 2017

As a workaround, I was able to modify some of the files in node_modules/@angular/service-worker to just do:
return navigator.serviceWorker.register(script, { scope: options.scope });

Then I was able to get my app working in addition to NGSW registered.

It would be nice to add a RegistrationOptions field that allowed indicating the max time for the NGSW to wait for registration.

@Splaktar

This comment has been minimized.

Copy link
Member

commented Jan 3, 2018

@alxhub I've created a reproduction repo here. You can see that the NGSW doesn't register here.

@JiaLiPassion

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2018

@Ploppy3 , could you create a reproduce repo? I would like to debug the zone related part.

@Ploppy3

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

@JiaLiPassion

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2018

@Ploppy3 , thank you, I think I may have found the reason, I will try to check it further and create a PR in zone.js.

@JiaLiPassion

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2018

@Ploppy3 , I have created a PR, angular/zone.js#999, I used you repo to test, it worked.

@Splaktar , could you try the attached zone.js.zip to test your repo? I used your repo and some google api error occurs.
zone.js.zip

@Ploppy3

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

@JiaLiPassion Did you try with setTimeout? It may be a problem too, I did not test though.

@JiaLiPassion

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2018

@Ploppy3 , I will test it, but setTimeout is different with setInterval, I think it should be ok.

update

I tested with you repo, setTimeout is ok.
The reason setInterval is not stable because zone.js will update internal task count when schedule, but will never decrease it.

@Ploppy3

This comment has been minimized.

Copy link
Author

commented Jan 26, 2018

Ok thank you very much, do you think this will result in any performance gain ?

@JiaLiPassion

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2018

@Ploppy3, I believe performance will be the same with current version.
except in some rare case, which is there are lot of setInterval and cancelInterval calls in the logic. in such kind of case, there will be performance improvement because in the new PR, setInterval will not trigger onHasTask any more.

@Spaier

This comment has been minimized.

Copy link

commented Jul 3, 2018

@rahulsahay19 I'd try to remove all modules from app.module, core.module and shared.module to see if it works with a blank application then add them one by one. Also ngsf-config binary isn't used in angular cli build with service worker, have you tried to specify --ngsw-config-path your/path/ngsw-config.json and remove ngsf-config calls?
2018-07-03 1
2018-07-03

@rahulsahay19

This comment has been minimized.

Copy link

commented Jul 4, 2018

@Spaier Thanks for your response. It got fixed. Basically the problem was with base-href setting. so, my ngsw-worker.js sits after localhost/site/. And

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

takes actual path than relative path. hence made the same relative by just putting

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

and also modified manifest.json for relative path like shown below.

{
  "name": "kognifai-poseidon-home",
  "short_name": "kognifai-poseidon-home",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Thanks,
Rahul

@EatonZ

This comment has been minimized.

Copy link

commented Aug 23, 2018

Ran into this issue on a new Angular 6.1.4 app. Service Worker doesn't install when rxjs' interval is used as advised in the official documentation. When it's commented out, everything works as expected.

Is there any sign of an official workaround/fix for this issue? It seems odd to me that the docs would recommend this approach if it doesn't work. It seems like there should be some kind of note in the docs that warns about this behavior.

@smnbbrv

This comment has been minimized.

Copy link

commented Aug 27, 2018

This is sooooo ugly. Just spent two hours to find out that the documentation is recommending the not-working "solution".

I'm fine with running things outside angular zone, I don't even care whether this is a workaround or not. But, for the god's sake, I ask for all the people who will come to this issue some day, fix the documentation!

Better it recommends nothing than something that is known to be not working since already half a year.

@Ploppy3

This comment has been minimized.

Copy link
Author

commented Aug 27, 2018

@smnbbrv You can open an issue regarding the documentation.

Also, only the setTimeout or setInterval statements should run outside the zone, the given function should run in the zone and therefore it does not affect your app.

this.ngZone.runOutsideAngular(() => {
  interval(1000).subscribe(() => {
    this.ngZone.run(() => {
      // put your usual code here
    });
  });
});
@Teamop

This comment has been minimized.

Copy link
Contributor

commented Oct 18, 2018

With code comes from angular-cli#8779, also works. That's, wrap the interval part after the application is stable. thanks @dirand

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);
    });
  }
}

JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Oct 19, 2018

JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Oct 19, 2018

JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Oct 19, 2018

gkalpak added a commit to JiaLiPassion/angular that referenced this issue Nov 7, 2018

gkalpak added a commit to JiaLiPassion/angular that referenced this issue Nov 7, 2018

gkalpak added a commit to JiaLiPassion/angular that referenced this issue Jan 16, 2019

@stefan-karlsson

This comment has been minimized.

Copy link

commented Jan 21, 2019

Should it be possible to throw a error when the application does not reach a stable state within x seconds after calling ServiceWorkerModule.register()?

I think that would help a lot of users having this problem.

@gkalpak

This comment has been minimized.

Copy link
Member

commented Jan 22, 2019

Once #21842 lands, we could consider changing the default strategy to registering once stable or when a certain amont of time passes (whichever comes first).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.