Angular Service Worker通知

2022-07-12 10:03 更新

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

操作

详情

openWindow

在指定的 URL 处打开一个新选项卡,该选项卡相对于 Service Worker 范围进行解析。

focusLastFocusedOrOpen

聚焦最后一个有焦点的客户端。如果没有客户端打开,则它会在指定的 URL 处打开一个新选项卡,该选项卡是相对于 Service Worker 范围解析的。

navigateLastFocusedOrOpen

聚焦最后一个有焦点的客户端并将其导航到指定的 URL,该 URL 相对于 Service Worker 范围进行解析。如果没有打开的客户端,则它会在指定的 URL 处打开一个新选项卡。

如果 ​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​。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号