angular - Angular ServiceWorker 推送通知不起作用

Question

我正在处理网络推送消息。我有一个推送消息的小型服务器。这是可行的，但在 Chrome 中，我只收到“此站点已在后台更新”的消息。那是我的 Angular 代码：

    ngOnInit(): void {
if (this.swUpdate.isEnabled) {
  this.swUpdate.available.subscribe(() => {
    if (confirm('Es steht ein Update bereit. Soll dies geladen werden?')) {
      window.location.reload();
    }
  });
}

if (this.swPush.isEnabled) {
  this.swPush.requestSubscription({
    serverPublicKey: this.VAPID_PUBLIC_KEY
  })
    .then(sub => this.notificationService.addPushSubscriber(sub).subscribe(x => console.log(x)))
    .catch(err => console.error('Could not subscribe to notifications', err));
}

}

如果我将这两个函数添加到 ngsw-worker.js 中，一切都很好。现在我得到了正确的信息。如果没有这些更改，我在 Firefox 中不会收到任何消息。

self.addEventListener('push', function(event) {
  if (!(self.Notification && self.Notification.permission === 'granted')) {
    return;
  }

  var data = {};
  if (event.data) {
    data = event.data.json();
  }
  var title = data.title;
  var message = data.message;
  var icon = "img/FM_logo_2013.png";

  self.clickTarget = data.clickTarget;

  event.waitUntil(self.registration.showNotification(title, {
    body: message,
    tag: 'push-demo',
    icon: icon,
    badge: icon
  }));
});

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click Received.');

  event.notification.close();

  if(clients.openWindow){
    event.waitUntil(clients.openWindow(self.clickTarget));
  }
});

标签： angularpush-notificationprogressive-web-apps