Angular 6 - “服务工作者被禁用或不受支持”错误

Question

我想使用web-push 模块和angular service worker 推送通知订阅。我已按照以下链接的说明进行操作：Angular Push Notifications: a Complete Step-by-Step Guide 和 Push Notifications with Angular & Express 但通知提示并未按应有的方式显示。我检查了swPush 对象，发现它没有启用，我也不知道为什么我完全按照那些链接所说的那样遵循angular/pwa 安装说明。希望这里有人可以提供帮助。非常感谢！

我使用自己的 Nodejs 服务器运行应用程序，而不是使用 http-server 模块。

这是我的推送订阅代码：

readonly VAPID_PUBLIC_KEY =
'BIfDkegCvhzctX06rYvwQImhbfAymWYE3wtcog9E4Zj7LOgX6TQFS6fZSqLCt01zBZtc1-jSwpZrZEmTQ2i95V8'; // key generated with web-push

 constructor(
   private user: UserService,
   private httpClient: HttpClient,
   private router: Router,
   private auth: AuthService,
   private swPush: SwPush
 ) {
     this.swPush.requestSubscription({
       serverPublicKey: this.VAPID_PUBLIC_KEY
     })
     .then(subcription => {
       console.log('Send ' + subcription + ' to server');
     })
     .catch(console.error);
}

返回错误：

错误：此浏览器已禁用或不支持 Service Worker 在 SwPush.push../node_modules/@angular/service-worker/fesm5/service-worker.js.SwPush.requestSubscription (service-worker.js:146) 在新的 DashboardComponent (dashboard.component.ts:40) 在 createClass (core.js:9311) 在 createDirectiveInstance (core.js:9186) 在 createViewNodes (core.js:10406) 在 createRootView (core.js:10320) 在 callWithDebugContext (core.js:11351) 在 Object.debugCreateRootView [as createRootView] (core.js:10838) 在 ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8666) 在 ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3315)

预期结果：

Answer 1

此错误是由于服务人员不使用ng serve 造成的。使用http-server 运行，然后它工作正常。 如Angular service workers所说：

因为 ng serve 不适用于服务工作者，所以您必须使用单独的 HTTP 服务器在本地测试您的项目。您可以使用任何 HTTP 服务器

Answer 2

只需在“AppModule”中设置服务工作者在开发环境中工作

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

到

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