Angular Service Worker通知

Service Worker 通知

推送通知是吸引用户的一种引人注目的方式。通过 Service Worker 的强大功能，即使你的应用程序不在焦点上，也可以将通知发送到设备。

Angular Service Worker 支持显示推送通知和处理通知点击事件。

使用 Angular Service Worker 时，推送通知交互是使用 ​SwPush ​服务处理的。要了解有关所涉及的浏览器 API 的更多信息，请参阅推送 API和使用通知 API。

通知负载

通过推送具有有效负载的消息来调用推送通知。

在 Chrome 中，你可以在没有后端的情况下测试推送通知。打开 Devtools -> Application -> Service Workers 并使用 ​Push​ 输入发送 JSON 通知负载。

通知点击处理

​notificationclick ​点击事件的默认行为是关闭通知并通知 ​SwPush.notificationClicks​。

你可以通过向 ​data ​对象添加 ​onActionClick ​属性并提供 ​default ​条目来指定要在 ​notificationclick ​上执行的附加操作。当单击通知时没有打开的客户端时，这尤其有用。

{
  "notification": {
    "title": "New Notification!",
    "data": {
      "onActionClick": {
        "default": {"operation": "openWindow", "url": "foo"}
      }
    }
  }
}

操作

Angular Service Worker 支持以下操作：

如果 ​onActionClick ​项未定义 ​url​，则使用 Service Worker 的注册范围。

行动

操作提供了一种自定义用户如何与通知交互的方法。

使用 ​actions ​属性，你可以定义一组可用的操作。每个动作都表示为一个动作按钮，用户可以单击该按钮与通知进行交互。

此外，使用 ​data ​对象上的 ​onActionClick ​属性，你可以将每个操作与单击相应操作按钮时要执行的操作联系起来：

{
  "notification": {
    "title": "New Notification!",
    "actions": [
      {"action": "foo", "title": "Open new tab"},
      {"action": "bar", "title": "Focus last"},
      {"action": "baz", "title": "Navigate last"},
      {"action": "qux", "title": "Just notify existing clients"}
    ],
    "data": {
      "onActionClick": {
        "default": {"operation": "openWindow"},
        "foo": {"operation": "openWindow", "url": "/absolute/path"},
        "bar": {"operation": "focusLastFocusedOrOpen", "url": "relative/path"},
        "baz": {"operation": "navigateLastFocusedOrOpen", "url": "https://other.domain.com/"}
      }
    }
  }
}

如果操作没有相应的 ​onActionClick ​条目，则通知将关闭并在现有客户端上通知 ​SwPush.notificationClicks​。