Event Notificationsを使用して、FirefoxWebにプッシュ通知を作成および送信する

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

Event Notifications とは何ですか?

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

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

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

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

目標

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

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

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

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

汎用 API ソースの追加

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

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

Event Notifications 宛先の作成

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

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

  • 名前 ：宛先の名前を入力してください。
  • 説明 ：宛先に関する任意の説明を追加します。
  • タイプ ：ドロップダウンリストから「 Firefox プッシュ通知 」タイプを選択してください。
  • 宛先計画 (実動前宛先または実動宛先) を選択します。
    • プレプロダクション先- 開発およびテスト環境向けに、この先を低コストのプッシュ先として選択してください。
    • 生産先- この生産先の機能を最大限に活用してください。 利用可能なデバイス数および送信メッセージ数に制限はありません。
  • Web サイトの URL を指定します。
  • [ 宛先を作成 ] をクリックします。
  • Firefox のデスティネーションを作成したら、そのデスティネーションを編集して、Web SDKに必要な vapID の公開キーを取得してください。

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

配信先
通知を受け取る

Event Notifications トピックの作成

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

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

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

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

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

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

Event Notifications Firefox Web SDK のセットアップ

Firefox Web SDK は、Firefox Web サイトがプッシュ通知を受信できるようにします。 Event Notifications Firefox 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>",
   "firefoxDestinationId": "<firefox_destination_id>",
   "firefoxApplicationServerKey": "<Firefox_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 を使用して、 IBM Cloud Event Notifications サービスにデバイスを登録してください。 次のいずれかのオプションを選択します。

    • UserIdなしで登録します。
       enPush.register(function(response) {
      alert(response.response)
   })
   ```
* `UserId` に登録してください。 `userId` ベースの通知の場合、register メソッドは、 `userId` というパラメータをもう 1 つ受け取ります。

```js {: codeblock}
   bmsPush.registerWithUserId("UserId",function(response) {
      alert(response.response)
   })
   ```
   `UserId`は、プッシュ・サービス・インスタンスにデバイスを登録する際に使用するユーザー ID 値です。

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

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

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

Firefox デバイスへの通知の送信

通知送信 API を使用して、Firefox デバイスのプッシュ通知を送信します。 API を直接呼び出す代わりに、ノードまたは実行管理 SDK を使用できます。

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