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

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

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

Event Notifications とは何ですか?

Event Notificationsは、IBM Cloudアカウントで発生した重要なイベントを通知したり、Webhookを使用して自動化されたアクションをトリガするイベント通知ルーティングサービスです。 You can filter and route event notifications from IBM Cloud services like Availability Monitoring, to email, SMS, push notifications, and webhooks.

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

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

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

目標

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

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

開始前に

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

  • HTML、CSS、jsを使用してウェブサイトのコードを修正するために、任意のコードエディタをダウンロードしてインストールします。
  • 送信者 ID とサーバー API キーを取得するために Firebase コンソールにログインする 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 プッシュ宛先をセットアップするには、FCM 資格情報 (サーバー・キー) を取得する必要があります。 サーバーキーは安全に保管され、Event NotificationsサービスがFCMサーバーに接続する際に使用します。

  • Firebase コンソールに移動します。 Google ユーザー・アカウントが必要です。
  • Create a project をクリックします。 既にプロジェクトがある場合は、Add Projectをクリックします。
  • Create a project windowで、プロジェクト名を入力し、条件に同意し、トグル・スイッチを選択して Google アナリティクスを有効または無効にします (オプション)。Continueをクリックします。
  • Google アナリティクスが有効になっている場合は、「Configure Google Analytics」ウィンドウでAnalytics locationを選択し、条件に同意します。
  • Create Project をクリックします。
  • 新規プロジェクトの準備ができたら、Continueをクリックします。
  • ナビゲーション・パネルで、Project Overviewの横にあるsettingsアイコンを選択し、Settings > Project settingsを選択します。
  • Cloud Messaging タブをクリックして、プロジェクト資格情報 Server Key を表示します。

caption-side=bottom"
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 キーを取得します。

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

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

  • htmlファイルの'<head> タグに'manifest.json を含める。

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

  • スクリプトにIBM Cloudウェブプッシュ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メソッドはもう1つのパラメータ、'userId を受け付けます。

      bmsPush.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 を直接呼び出す代わりに、ノードまたは実行管理 SDK を使用できます。

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

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