单击@angular/service-worker 推送通知的操作部分答案

【问题标题】：Clicking the action part of @angular/service-worker push notifications单击@angular/service-worker 推送通知的操作部分
【发布时间】：2018-08-04 23:49:30
【问题描述】：

我一直在尝试将用户重定向到来自后端 (PHP) 的 Web 推送的“操作”部分。

    return (new WebPushMessage)
        ->title('Title')
        ->icon('icon.png')
        ->body('Body Msg')
        ->action('Open Notification', 'open_notification')
        ->data(['id' => $notification->id,'url'=>'http://somewhere']);

默认服务工作者使用：

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(clients.matchAll({
       type: "window"
    }).then(function(clientList) {
       for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
              if (client.url == '/' && 'focus' in client)
                 return client.focus();
       }
       if (clients.openWindow)
          return clients.openWindow('/');
    }));
});

来自https://developer.mozilla.org/en-US/docs/Web/Events/notificationclick

Angular 5 用途

import {SwPush, SwUpdate} from '@angular/service-worker';

然后我的问题是如何在前端（Angular 5）使用@angular/service-worker 解释这个

【问题讨论】：

我正在寻找同样的东西，我认为它还没有记录。
有一个问题你解释一下它是如何工作的github.com/angular/angular/issues/22311
@brahimfes 谢谢，我已经订阅了。希望他们能尽快提供一些可用的东西。
@brahimfes 找到了解决方案。

标签： angular5

【解决方案1】：

得到了 Github 上u-ryo 的回复

有一个解决方法。将以下代码添加到 ngsw-worker.js 中 this.scope.addEventListener('push', (event) => this.onPush(event));（第 1775 行）。

  this.scope.addEventListener('notificationclick', (event) => {
    console.log('[Service Worker] Notification click Received. event', event);
    event.notification.close();
    if (clients.openWindow && event.notification.data.url) {
      event.waitUntil(clients.openWindow(event.notification.data.url));
    }
  });

然后你可以在“notification.data.url”中指定URL。

https://github.com/angular/angular/issues/20956#issuecomment-374133852

【讨论】：

它适用于我在 chrome 上的桌面上。是不是也可以在安卓设备上工作？
@Vik 来自后端的 url 是一个 web url，即 www.website.com/notifications/id。这不适用于移动设备。除非你的 Android 设备上有网站的 PWA。
所以没有办法对应用程序的通知采取行动？
@Chris 不，它没有。
@BolajiPemipo 我正在使用 Angular 7。我发现了这个不错的教程：jakubcodes.pl/2018/06/13/enhancing-angular-ngsw 并为点击部分注册了第二个自定义软件 - 到目前为止它工作得很好。还是谢谢

【解决方案2】：

如果您想要操作，并且每个操作都有不同的 url，这是我的解决方案。

    this.scope.addEventListener('notificationclick', (event) => {
        event.notification.close();
        var payload = event.notification.data;
        var url = payload.url;
        if (event.action && payload.actions && payload.actions.length) {
            var actions = payload.actions.filter(x => x.action == event.action);
            if (actions.length && actions[0].url) {
                url = actions[0].url;
            }
        }
        if (clients.openWindow && url) {
            event.waitUtil(clients.openWindow(url));
        }
    });

【讨论】：

waitUntil 有错别字