角度服务工作者 - 处理推送通知点击

时间:2018-01-17 21:22:14

标签: angular angular5 web-push angular-service-worker

如何处理角度服务工作者中的推送通知单击。 SWPush没有任何方法。

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

3 个答案:

答案 0 :(得分:3)

答案 1 :(得分:2)

我必须将package.json更新为:

“ @ angular / service-worker”:“ 7.1.0”

然后这对我有用:

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

答案 2 :(得分: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,
     );

  });

如果您不想更新,则应使用ngsw-worker.jsWebpack等观看文件gulp,然后在 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));
    }
  });