Angular Service Worker - 如何处理推送通知点击事件

Question

我该如何在Angular Service Worker中处理推送通知的点击事件？ SWPush没有任何方法。

我尝试引用一个监听"notificationclick"事件处理程序的JS文件，但在单击通知按钮时它从未被触发。

- Sampat

Answer 1

我建议将 Angular 升级至最新的版本（至少 Angular 7.1.0），并且保持更新。这样，您就可以订阅 notificationClicks。

在构造函数中注入 SwPush，然后使用以下内容：

   this.swPush.notificationClicks.subscribe( arg =>
   {
     console.log(
       'Action: ' + arg.action,
       'Notification data: ' + arg.notification.data,
       'Notification data.url: ' + arg.notification.data.url,
       'Notification data.body: ' + arg.notification.body,
     );

  });

如果您不想更新，可以使用Webpack、gulp等工具监视文件ngsw-worker.js。然后，在以下行的后面：

this.scope.addEventListener('push', (event) => this.onPush(event));

添加以下内容：

this.scope.addEventListener('notificationclick', (event) => {
    console.log('Notification event', event);
    event.notification.close();
    var payload = event.notification.data;

    if (event.action && payload.actions && payload.actions.includes(event.action) 
       clients.openWindow && event.notification.data.url) {
      event.waitUntil(clients.openWindow(event.notification.data.url));
    }
  });

- titusfx

Answer 2

调用SWPush#requestSubscription。 这是一篇好的文章

- Stuart Hallows

Answer 3

我需要更新我的package.json文件：

"@angular/service-worker": "7.1.0"

然后这个问题就得到了解决：

this.swPush.notificationClicks.subscribe((result) => {
      console.log('clicked', result);
    });

- Barrie Galitzky

Answer 4

this.swPush.notificationClicks.subscribe((result) => {
      console.log('clicked', result);
    });

这个正在工作。但它没有显示有用的路由数据。

- lalithBR