Event Notificationsを使用して、プッシュ通知を作成し、Chromeウェブに送信する

Event Notifications サービスを作成し、Chrome プッシュ通知のプッシュ宛先を追加し、Chrome Web デバイスにメッセージを送信します。

Event Notifications とは何ですか?

Event Notifications IBM Cloud アカウント発生した重要なイベントを通知したり、Webhookを使用して自動アクションをトリガーしたりするイベント通知ルーティングサービスです。 Availability Monitoring などの IBM Cloud サービスからのイベント通知をフィルタリングし、メール、SMS、プッシュ通知、Webhookなどに転送することができます。

クライアントは Chrome Web プッシュ通知をどのように使用しますか?

以下の図は、クライアントが Chrome Web プッシュ通知を使用する方法を示しています。

クライアントはプッシュ
ように利用しているか

目標

このチュートリアルでは、以下のようにプッシュ通知を送信する方法について説明します。

  • Event Notifications を使用して Web サイトを作成します。
  • Chrome Web 資格情報を取得します。
  • SDK をダウンロードし、通知のセットアップを完了します。
  • Chrome Web プッシュ通知を構成してブラウザーに送信します。

開始前に

以下の前提条件を満たしている必要があります。

  • 任意のコードエディタをダウンロードしてインストールし、HTML、CSS、 JavaScript を使用してウェブサイトのコードを作成してください。
  • 送信者 ID とサーバー API キーを取得するために Firebase コンソールにログインする Google アカウント。
  • IBM Cloud アカウント。 存在しない場合は、IBM Cloud アカウントを作成します。

Event Notifications サービス・インスタンスの作成

  • IBM Cloud アカウントにログインします。
  • IBM Cloud のカタログ で、「 Event Notifications 」＞「 Event Notifications 」を検索してください。
  • 対応している地域のリストから地域を選択し、 料金プランを選択してください。
  • サービス名 を指定します。
  • 「リソース・グループ」 を選択します。
  • チェック・ボックスをクリックして、ご使用条件と条件に同意します。
  • 「作成」 をクリックします。

FCM 資格情報の取得

Firebase Cloud Messaging (FCM) は、Chrome Web デバイスにプッシュ通知を配信するゲートウェイです。 コンソールで Chrome Web プッシュ宛先をセットアップするには、FCM 資格情報 (サーバー・キー) を取得する必要があります。 サーバーキーは安全に保管されており、 Event Notifications サービスがFCMサーバーに接続する際に使用されます。

  • Firebase コンソールに移動します。 Google ユーザー・アカウントが必要です。
  • **「プロジェクトを作成」**をクリックします。 すでにプロジェクトをお持ちの場合は、「 プロジェクトを追加 」をクリックしてください。
  • 「 プロジェクトの作成 」ウィンドウで、プロジェクト名を入力し、利用規約に同意し、トグルスイッチを選択して Google アナリティクスを有効または無効（任意）にした後、 「続行 」をクリックします。
  • Google アナリティクスを有効にした場合は**「Google アナリティクスの構成 (Configure Google Analytics)」ウィンドウで、「アナリティクスの場所 (Analytics location）」**を選択し、ご利用条件を受け入れます。
  • **「プロジェクトを作成」**をクリックします。
  • 新規プロジェクトの準備ができたら 「続行」 をクリックします。
  • ナビゲーションパネルで、「 プロジェクトの概要 」の横にある設定アイコンを選択し、 「設定 」＞「 プロジェクト設定 」を選択します。
  • [ Cloud Messaging ] タブをクリックして、プロジェクトの認証情報（ サーバーキー ）を確認してください。

caption-side=bottom"
FCM資格証明書
証明書*FCM資格証明書

汎用 API ソースの追加

汎用APIソースを作成するには：

  • Event Notifications インスタンスで[ ソース ]をクリックします。
  • [作成] をクリックし、[ ソースの作成 ] ダイアログで API ソースを選択します。
  • 名前と（必要に応じて）説明を入力し、「 ソースを作成 」をクリックします。

Event Notifications 宛先の作成

Event Notifications インスタンスで［ Destinations ］をクリックし、［ Create ］をクリックします。

[ 宛先を作成 ] ダイアログに、以下の宛先の詳細を入力してください。

  • 名前 ：宛先の名前を入力してください。
  • 説明 ：宛先に関する任意の説明を追加します。
  • タイプ ：ドロップダウンリストから「 Chrome プッシュ通知 」のタイプを選択してください。
  • 宛先計画 (実動前宛先または実動宛先) を選択します。
    • プリプロダクションデスティネーション- 開発およびテスト環境用の低コストなプッシュデスティネーションとして選択します。
    • プロダクション・デスティネーション- このデスティネーションの能力をフルに使ってください。 利用可能なデバイス数および送信メッセージ数に制限はありません。
  • ウェブサイト「 URL 」を許可リストに追加してください。
  • FCM認証情報の取得セクションで取得したサーバーキーを追加します。
  • [ 宛先を作成 ] をクリックします。
  • Chromeのデスティネーションが作成されたら、デスティネーションを編集して、Web SDKに必要な公開キー（ vapID ）を取得します。

配信先編集*配信
*受信通知
受信通知

配信先
通知を受け取る

Event Notifications トピックの作成

Event Notifications インスタンスで［ トピック ］をクリックし、［ 作成 ］をクリックします。 「 トピックの詳細 」および「 イベントフィルター 」の各ステップで、以下のトピックとフィルターの詳細を入力してください：

  • 名前 ：トピックの名前を入力してください。
  • 説明 ：トピックに関する任意の説明を追加します。
  • ソース ：ドロップダウンリストからソースを選択してください。
  • イベントの種類 ：ドロップダウンリストからイベントの種類を選択してください。
  • イベントのサブタイプ ：イベントのサブタイプドロップダウンリストからイベントのサブタイプを選択してください。
  • 重大度 ：重大度のドロップダウンリストから重大度を選択してください。
  • 高度な条件: jsonpathの仕様に 従った独自の条件を記述します。 Jsonpath 式は、次の場所で検証できます。 jsonpath.com または extendsclass.com.

Event Notifications サブスクリプションの作成

「 サブスクリプション 」のステップに進んでください。 [作成 ] をクリックし、[ サブスクリプションの作成 ] ダイアログで以下のサブスクリプションの詳細を入力します。

  • サブスクリプション名 ：サブスクリプションの名前を入力してください。
  • 目的地タイプ ：目的地のタイプを選択してください。
  • 目的地 ：目的地を選択してください。

**「サブスクリプションの作成」**をクリックします。

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 に変更します。

  • HTMLファイルの <head> タグ内に、 manifest.json を記述してください。

    <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>

  • ウェブサイトが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` ベースの通知の場合、register メソッドは、 `userId` というパラメータをもう 1 つ受け取ります。

```js
   enPush.registerWithUserId("UserId",function(response) {
      alert(response.response)
   })
   ```

   `UserId`は、プッシュ・サービス・インスタンスにデバイスを登録する際に使用するユーザー ID 値です。

  • subscribe API は、タグのデバイスをサブスクライブします。 デバイスが特定のタグにサブスクライブすると、デバイスはそのタグについて送信された通知を受け取ることができます。 以下のコード・スニペットを Web アプリケーションに追加して、タグのリストをサブスクライブします。

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

  • セットアップが完了したら、アプリケーションを実行し、プッシュ通知に登録します。

Chrome Web デバイスへの通知の送信

通知送信 API を使用して、Chrome Web デバイスのプッシュ通知を送信します。 APIを直接呼び出す代わりに、 Node、 行く、 Python または Java admin SDKを使用することができます。

MacOS の Chrome Web サイトで通知を受信しました。

通知を受け取る
を受け取る*
を受け取る