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创建 Web 站点。
  • 获取 Chrome Web 凭证。
  • 下载 SDK 并完成通知设置。
  • 配置 Chrome Web 推送通知并将其发送到浏览器。

准备工作

您必须具备以下先决条件：

  • 下载并安装任何代码编辑器，以使用 HTML，CSS 和 js 来更正 Web 站点代码。
  • 用于登录到 Firebase 控制台以获取发送方标识和服务器 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 全权证书{: caption="证书FCM 全权证书FCM" caption-side="bottom"}证书

添加通用 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 密钥。

caption-side=bottom"
目的地编辑*
*

Destination
Receive notifications

创建 Event Notifications 主题

在 Event Notifications 控制台中选择 Topics，然后单击 Create。 输入以下主题详细信息：

  • Name: 输入主题的名称。
  • Description: 添加主题的可选描述。
  • Source：从下拉列表中选择来源。
  • Event type: 从下拉列表中选择事件类型。
  • Event sub type 从事件子类型下拉列表中选择事件子类型。
  • Severity: 从严重性下拉列表中选择严重性。
  • Advanced conditions: 编写您自己的定制条件，必须遵循 jsonpath 规范。

创建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 Web 站点接收推送通知。 完成以下步骤以安装 Event Notifications Chrome Web SDK，初始化 SDK 并注册 Web 站点的通知。

  • 要在项目中包含 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 src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>

  • 完成以下步骤以启用 Web 站点来初始化 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 是要用于在推送服务实例中注册设备的用户标识值。

  • subscribe API 为标记预订设备。 设备订阅特定标签后，就能接收为该标签发送的通知。 将以下代码片段添加到 Web 应用程序以预订标记列表。

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

  • 设置完成后，运行应用程序并注册推送通知。

向 Chrome Web 设备发送通知

使用 发送通知 API 来发送 Chrome Web 设备的推送通知。 您可以使用 Node 或 Go 管理 SDK，而不是直接调用 API。

在 MacOS中的 chrome Web 站点上接收到通知。

接收通知{: caption="接收通知接收" caption-side="bottom"}