Angular Service Worker通知

Service Worker 通知

推送通知是吸引用戶的一種引人注目的方式。通過 Service Worker 的強大功能，即使你的應用程序不在焦點上，也可以將通知發(fā)送到設備。

Angular Service Worker 支持顯示推送通知和處理通知點擊事件。

使用 Angular Service Worker 時，推送通知交互是使用 ?SwPush ?服務處理的。要了解有關所涉及的瀏覽器 API 的更多信息，請參閱推送 API和使用通知 API。

通知負載

通過推送具有有效負載的消息來調用推送通知。

在 Chrome 中，你可以在沒有后端的情況下測試推送通知。打開 Devtools -> Application -> Service Workers 并使用 ?Push? 輸入發(fā)送 JSON 通知負載。

通知點擊處理

?notificationclick ?點擊事件的默認行為是關閉通知并通知 ?SwPush.notificationClicks?。

你可以通過向 ?data ?對象添加 ?onActionClick ?屬性并提供 ?default ?條目來指定要在 ?notificationclick ?上執(zhí)行的附加操作。當單擊通知時沒有打開的客戶端時，這尤其有用。

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

操作

Angular Service Worker 支持以下操作：

如果 ?onActionClick ?項未定義 ?url?，則使用 Service Worker 的注冊范圍。

行動

操作提供了一種自定義用戶如何與通知交互的方法。

使用 ?actions ?屬性，你可以定義一組可用的操作。每個動作都表示為一個動作按鈕，用戶可以單擊該按鈕與通知進行交互。

此外，使用 ?data ?對象上的 ?onActionClick ?屬性，你可以將每個操作與單擊相應操作按鈕時要執(zhí)行的操作聯(lián)系起來：

{
  "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 ?條目，則通知將關閉并在現(xiàn)有客戶端上通知 ?SwPush.notificationClicks?。