Service Worker 通知

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

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

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

前提条件

我们建议你对以下内容有基本的了解：

• Service Worker 快速上手 。

通知负载

通过推送具有有效负载的消息来调用推送通知。请参阅 SwPush以获得指导。

在 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 支持以下操作：

操作	Operations	详情	Details
openWindow	在指定的 URL 处打开新选项卡。Opens a new tab at the specified URL.
focusLastFocusedOrOpen	聚焦最后一个有焦点的客户端。如果没有打开客户端，则会在指定的 URL 处打开一个新选项卡。Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL.
navigateLastFocusedOrOpen	聚焦最后一个有焦点的客户端并将其导航到指定的 URL。如果没有打开客户端，则会在指定的 URL 处打开一个新选项卡。Focuses the last focused client and navigates it to the specified URL. If there is no client open, then it opens a new tab at the specified URL.
sendRequest	向指定的 URL 发送简单的 GET 请求。Send a simple GET request to the specified URL.

这些 URL 会被解析为相对于此 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": "Send request in the background"}
      {"action": "other", "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/"},
        "qux": {"operation": "sendRequest", "url": "https://yet.another.domain.com/"}
      }
    }
  }
}

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

关于 Angular Service Worker 的更多信息

你可能还对下列内容感兴趣：

• 生产环境下的 Service Worker 。