Angular PWA error Site cannot be installed: no matching service worker detected

Question

I have a website (Angular 9.0.1), I added the @angular/pwa package to turn it into a PWA and it's not working.

The website is on production site but with test data right now on https://new.indomablestore.com

I have checked that the required files ( manifest.webmanifest , ngsw.json , ngsw-worker.js ) are on the root folder. I have checked that the index.html file points correctly to the manifest, and it is shown on Chrome Devtools Application tab.

But on the Installability section it says: No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest.

I have also checked that the app.module.ts file has this line:

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

And I haven't modified any of the PWA files, I let Angular CLI build them.

Any help would be appreciated as the site is going to go live soon and this is the last thing on my list :)

Thanks!

UPDATE: The manifest looks like this:

  "name": "Indomable",
  "short_name": "Indomable",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    ...
  ]
}

And the Service Worker is registered on the app.module like this:

@NgModule({
  declarations: [
    AppComponent,
    ...PAGES,
    ...COMPONENTS,
    ...PIPES
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    routing,
    NgxPayPalModule,
    ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production, scope: './' })
  ],
  ...

Thanks for the quick answers anyway :)

Answer 1

I found the answer. Angular waits until the application is "stable" before it registers the service worker. The app has an AJAX call on startup that checks against the server if there are new products, photos... and apparently this makes Angular think it isn't stable so it does not even call the service worker registration.

As pointed out in this Stack Overflow answer the registration has an option named "registrationStrategy" and I can set it to "registerImmediately".

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

And it just started working :)

Anyway, thanks for the help and the quick answers.

Answer 2

You can try to set the scop ( / ) in both the app manifest:

"scope": "/",
"start_url": "/",

and while registering the service worker:

    ServiceWorkerModule.register('./ngsw-worker.js', {
      scope: './',
    }),

but I think the issue is that your web server should append the trailing slash. That is, when user visit your site, they should be redirected to new.indomablestore.com/ , which correspond to the scope of your application and the basepath in your index.