IBM Cloud Docs
使用Event Notifications建立推播通知並將其發送到 Chrome 網絡

使用Event Notifications建立推播通知並將其發送到 Chrome 網絡

建立 Event Notifications 服務，新增「Chrome 推送通知」的推送目的地，並將訊息傳送至 Chrome Web 裝置。

何謂 Event Notifications？

Event Notifications 是事件通知遞送服務，用於通知您 IBM Cloud 帳戶中發生的嚴重事件，或使用 Webhook 觸發自動化動作。 您可以從 IBM Cloud 服務 (例如 Availability Monitoring) 過濾並遞送事件通知至電子郵件、SMS、推送通知及 Webhook。

用戶端如何使用 Chrome Web Push Notifications?

下圖顯示用戶端如何使用 Chrome Web Push Notifications。

用戶端如何使用推播通知
用戶端如何使用推播通知

目標

本指導教學教您如何傳送推送通知，如下所示:

  • 使用 Event Notifications建立網站。
  • 取得 Chrome Web 認證。
  • 下載 SDK 並完成通知設定。
  • 配置 Chrome Web Push Notifications 並將其傳送至瀏覽器。

開始之前

您必須具備以下先決條件：

  • 下載並安裝任何程式碼編輯器，以使用 HTML、CSS 及 js 來更正網站程式碼。
  • 用來登入 Firebase 主控台以取得「傳送端 ID」及「伺服器 API 金鑰」的 Google 帳戶。
  • IBM Cloud 帳戶。 如果您沒有，請 建立 IBM Cloud 帳戶。

建立一個Event Notifications服務實例

  • 登入 IBM Cloud 帳戶。
  • 在 IBM Cloud 型錄 中，搜尋 Event Notifications > Event Notifications。
  • 從受支援地區清單中選取 Region，然後選取 pricing plan。
  • 提供 Service name。
  • 選擇 resource group。
  • 按一下勾選框，以接受授權合約及條款。
  • 按一下 Create。

取得 FCM 認證

Firebase Cloud Messaging (FCM) 是將推送通知遞送至 Chrome Web 裝置的閘道。 若要在主控台上設定 Chrome Web Push 目的地，您必須取得 FCM 認證 (伺服器金鑰)。 伺服器金鑰儲存安全，並由 Event Notifications 服務用來連接至 FCM 伺服器。

  • 移至 Firebase 主控台。 Google 使用者帳戶是必要的。
  • 按一下 Create a project。 如果您已有專案，請按一下 Add Project。
  • 在 Create a project window 中，輸入專案名稱，並接受條款，然後選取切換開關並按一下 Continue，以啟用或停用 Google 分析 (選用)。
  • 如果已啟用 Google 分析，則在 Configure Google Analytics 視窗中，選擇 Analytics location，並接受條款。
  • 按一下 Create Project。
  • 當新專案準備就緒時，按一下 Continue。
  • 在導航面板中，選擇 Project Overview 旁邊的 settings 圖標，然後選擇 Settings > Project settings。
  • 按一下 Cloud Messaging 標籤，以檢視您的專案認證: Server Key。

FCM 憑證
FCM 憑證

新增一般 API 來源

請執行下列步驟：

  • 移至 Event Notifications 儀表板的 Sources 區段。
  • 按一下 Add 並選取 API 來源。
  • 輸入名稱及選用說明，然後按一下 Add。

建立 Event Notifications 目的地

按一下 Event Notifications 主控台中的 Destinations，並新增下列目的地詳細資料:

  • Name: 新增目的地的名稱。
  • Description: 新增目的地的選用說明。
  • Type: 從下拉清單中選取 Chrome Push Notifications 類型。
  • 選取目的地計劃: 前置正式作業目的地或正式作業目的地。
    • Pre-production destination-針對您的開發和測試環境，選取此目的地作為低成本推送目的地。
    • Production destination-使用此目的地的完整功能。 允許無限的設備和出站訊息。
  • 新增您的網站 URL 以將其列入允許清單。
  • 新增您從 Get FCM credentials 區段取得的 Server Key。
  • 按一下新增。
  • 建立 Chrome 目的地時，請編輯所建立的目的地，以取得 Web SDK 所需的公用 vapId 金鑰。

目的地編輯
接收通知

目的地
接收通知

建立 Event Notifications 主題

在 Event Notifications 主控台中選取 Topics，然後按一下 Create。 輸入以下主題詳細資料：

  • Name: 輸入主題的名稱。
  • Description: 新增主題的選用說明。
  • Source：從下拉清單中選擇來源。
  • Event type: 從下拉清單中選取事件類型。
  • Event sub type 從事件子類型下拉清單中選取事件子類型。
  • Severity: 從嚴重性下拉清單中選取嚴重性。
  • Advanced conditions: 撰寫您自己的自訂條件，必須遵循 jsonpath specifications。

建立 Event Notifications 訂閱

在 Event Notifications 主控台中按一下 Subscriptions。 輸入以下訂閱詳細資訊：

  • Click 建立以顯示訂閱精靈。
  • 填寫以下訂閱詳細資料：
    • Subscription name: 訂閱的名稱。
    • Subscription description: 新增選用說明。
  • 在 Subscribe to a topic 區段下，從下拉清單中選取主題，並從目的地下拉清單中選取目的地。
  • Destination type: 在 Destination 下選取類型，然後按一下 Add。

設定 Event Notifications Chrome Web SDK

Chrome Web SDK 可讓 Chrome 網站接收推送通知。 請完成下列步驟，以安裝 Event Notifications Chrome Web SDK，起始設定 SDK，並登錄您網站的通知。

  • 若要將 SDK 併入專案中，請將 ENPushSDK.js、ENPushServiceWorker.js 及 manifest_Website.json 檔案新增至專案根資料夾。

  • 編輯 manifest_Website.json 檔。

    {
   "name": "YOUR_WEBSITE_NAME"
}

  • 將 manifest_Website.json 檔名變更為 manifest.json。

  • 將 manifest.json 包含在 html 檔案的 <head> 標記中。

    <link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">

  • 將 IBM Cloud Web 推送 SDK 併入 Script。

    <script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>

  • 請完成下列步驟，以啟用網站來起始設定 SDK。

    var enPush = new ENPush()

function callback(response) {
   alert(response.response)
}

var initParams = {
   "instanceGUID": "<instance_guid>",
   "apikey": "<instance_apikey>",
   "region": "<region>",
   "deviceId": "<YOUR_DEVICE_ID>",
   "chromeDestinationId": "<chrome_destination_id>",
   "chromeApplicationServerKey": "<Chrome_VapId_public_key>"
}

enPush.initialize(initParams, callback)

    • region: Event Notifications 實例的區域。 例如，us-south、eu-gb、au-syd、eu-de 或 eu-es。

    • deviceId: 用於裝置登錄的選用 deviceId。

  • 若要登錄通知，請使用 register() 或 registerWithUserId() API 向 Event Notifications 服務登錄裝置。 選擇下列一個選項：

    • 在不使用 UserId 的情況下登錄:

      enPush.register(function(response) {
   alert(response.response)
})

    • 向 userId 登錄。 對於 userId 型通知，登錄方法會再接受一個參數- userId。

      bmsPush.registerWithUserId("UserId",function(response) {
   alert(response.response)
})

      UserId 是您要用來在推送服務實例中登錄裝置的使用者 ID 值。

  • subscribe API 會訂閱裝置的標籤。 設備訂閱特定標籤後，設備可以接收針對該標籤發送的通知。 將下列程式碼 Snippet 新增至 Web 應用程式，以訂閱標籤清單。

    enPush.subscribe(tagName, function(response) {
   alert(response.response)
})

  • 當設定完成時，請執行您的應用程式並登錄以取得推送通知。

將通知傳送至 Chrome Web 裝置

使用 傳送通知 API 來傳送 Chrome Web 裝置的推送通知。 您可以使用 Node 或 Go 管理 SDK，而不直接呼叫 API。

在 MacOS中的 Chrome 網站上收到通知。

接收通知
接收通知