Angular Service Worker通知

Service Worker 通知

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

Angular Service Worker 支持顯示推送通知和處理通知點(diǎn)擊事件。

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

通知負(fù)載

通過推送具有有效負(fù)載的消息來調(diào)用推送通知。

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

通知點(diǎn)擊處理

?notificationclick ?點(diǎn)擊事件的默認(rèn)行為是關(guān)閉通知并通知 ?SwPush.notificationClicks?。

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

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

操作

Angular Service Worker 支持以下操作：

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

行動(dòng)

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

使用 ?actions ?屬性，你可以定義一組可用的操作。每個(gè)動(dòng)作都表示為一個(gè)動(dòng)作按鈕，用戶可以單擊該按鈕與通知進(jìn)行交互。

此外，使用 ?data ?對象上的 ?onActionClick ?屬性，你可以將每個(gè)操作與單擊相應(yīng)操作按鈕時(shí)要執(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/"}
      }
    }
  }
}

如果操作沒有相應(yīng)的 ?onActionClick ?條目，則通知將關(guān)閉并在現(xiàn)有客戶端上通知 ?SwPush.notificationClicks?。