4

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 :)

Iñigo Gorosabel
  • 502
  • 1
  • 4
  • 22
  • The chrome lighthouse tool also points to what cghislai mentions below. The start_url. Lighthouse usually gives you good hints on what you need to fix. – Mathias Feb 15 '20 at 00:38
  • Lighthouse report gives me two errors: "The start_url did respond, but not via a service worker." and "Does not register a service worker that controls page and start_url", but the links it provides are about Service Workers, not the specific errors. – Iñigo Gorosabel Feb 15 '20 at 13:21

2 Answers2

11

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.

Eonasdan
  • 7,563
  • 8
  • 55
  • 82
Iñigo Gorosabel
  • 502
  • 1
  • 4
  • 22
1

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.

cghislai
  • 1,751
  • 15
  • 29
  • The manifest had already "scope" and "start_url" set to "/". I have added the "scope" to the register function and it still says the same thing. The thing is that I have many other projects with Angular PWA, they all work and I don't redirect them to an URL with a trailing slash :( – Iñigo Gorosabel Feb 15 '20 at 13:17