Angular 6 PWA 节点不工作

Question

I have a Angular 6 app that works and registers the SW when served with http-server --port 8080 command as you can see here:

But when I serve the files from my Node / Express application that they are meant to be served. The service worker won't register, tried running the app from localhost and also from Heroku but it's the same. Application works otherwise. Any idea what can cause this?

Answer 1

I think this issue is to do with the path that @angular/cli uses when registering the service worker, I have found registering the service worker in main.ts to be more reliable:

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

Or, looking at this recent comment you can manually modify the path in app.modules.ts

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

Answer 2

I also had a same issue that worked locally but not herokou, and as a result of various searches on the.net, I came to this page.

In my case, I finally solved it by adding --prod to the ng build. With --prod , the settings in environment.prod.ts will be reflected, the "serivice worker" in production in angular.json will be true, also "enabled" -> true in ServiceWorkerModule.register in app.module.ts , and service worker is now working. FYI.