angular-cli: Service worker not getting registered

Why is this issue closed when it hasn’t been solved yet?

Found a solution:

I too had this problem with my project, and spent a whole day trying to figure it out. Yes, starting a clean new project and installing the @angular/pwa works out of the box. But as soon as you start building a bit on your project, it silently fails / just doesn’t load ngsw-worker.js.

Finally I downloaded the angular code and looked at the sources. It appears that there is a ‘registrationStrategy’ which has to do with if angular waits with the registration until your app is ‘stable’. Now I have a bunch of stuff I’m loading at the beginning of my project (like oidc client and building websocket connections) and angular apparently thinks my app never is stable.

Fortunately you can override the registrationStrategy 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.

I think this really really needs to be documented somewhere, preferably in the top of the docs with capital letters. Also, when the ngsw-worker doesn’t load whenever it isn’t stable, it would be VERY helpful to at least log something in the console!

same issue for me! and also same workaround helps (registering ngsw-worker in main.ts)

@alan-agius4 please reopen the issue, we have a few people here by now reporting this issue. in a previous message @kolkov gave you packages versions. i’ll write my packages versions also. as far as steps to reproduce, just as written in the template we followed the step-by-step guide:

ng add @angular/pwa --project *project-name*
ng build --prod

there are no console errors, the service workers simple don’t get registered, and when adding the suggested workaround they do get registered.

my packages versions:

Angular CLI: 7.3.5 Node: 10.15.1 Angular: 7.2.8 @angular-devkit/architect 0.13.5 @angular-devkit/build-angular 0.13.5 @angular-devkit/build-optimizer 0.13.5 @angular-devkit/build-webpack 0.13.5 @angular-devkit/core 7.3.5 @angular-devkit/schematics 7.3.5 @angular/cli 7.3.5 @angular/pwa 0.13.5 @ngtools/webpack 7.3.5 @schematics/angular 7.3.5 @schematics/update 0.13.5 rxjs 6.3.3 typescript 3.2.4 webpack 4.29.0

I just hit this bug with Angular 7.3.1. Why is the bug closed?

Service workers are only available to “secure origins” (HTTPS sites, basically) in line with a policy to prefer secure origins for powerful new features. However http://localhost is also considered a secure origin, so if you can, developing on localhost is an easy way to avoid this error.

https://www.chromium.org/blink/serviceworker/service-worker-faq

+1 We are experiencing the same problem.

/cc @unsafecode

I am disappointed that this kind of bug exists and I would love to see it resolved without the need to apply a fix on my own code nevertheless as far as I saw, this is a developer issue and we should (dear developers) fix it ourself. I was able in a first time to apply a dirty code to force the service worker to register itself.

main.ts

if ('serviceWorker' in navigator && isProduction) {
    navigator.serviceWorker.register('./ngsw-worker.js');
}

Note: the ./ is very important to avoid an error with custom base href.

And after more search, I figured out that the culprit was my code…

These issues helped me:

• https://github.com/angular/angular/issues/20970
• https://github.com/angular/angular-cli/issues/8779

Basically, I made two mistakes while using:

• fromEvent
• SwUpdate

To fix them, I used applicationRef.isStable.

Example:

this.isStableSubscription = this.applicationRef.isStable.subscribe(isStable => {
    if (isStable) {
        fromEvent(window, 'resize').pipe(
            distinctUntilChanged(),
            debounceTime(30)
        ).subscribe(() => {

            // Do some stuff here
        });
        this.isStableSubscription.unsubscribe();
    }
});

Note: if applicationRef is causing a cyclic dependency, you can:

• Use private injector: Injector in the constructor
• Create a property and set it this.applicationRef = this.injector.get(ApplicationRef);

Hi, indeed this might be the case that the application doesn’t get in a stable state.

However, the issue will be closed since the issue template was not followed. Ie no reproduction, nor details about the versions were provided.

If the problem persists kindly open a new issue and kindly fill the issue template and ideally provide a reproduction.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.