推送通知是吸引用户的一种引人注目的方式。通过 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。