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

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

Event Notifications サービスを作成し、Apple Push Notification Service (Safari) のプッシュ宛先を追加し、iOS デバイスにメッセージを送信します。

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 (FCM or APNs), and webhooks.

クライアントは Safari Push Notifications をどのように使用しますか?

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

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

目標

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

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

開始前に

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

  • IBM Cloud アカウント。 持っていない場合は、 IBM Cloud アカウントを作成します。
  • Event Notifications。インスタンスです。
  • SDK がアカウントにアクセスできるようにするための IAM API キー。 ここを 1 つ作成します。

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

  • IBM Cloudアカウント にログインします。
  • IBM Cloudカタログ で、'Event Notifications > Event Notifications を検索する。
  • サポートされるリージョンのリストからRegionを選択し、pricing planを選択します。
  • Service nameを提供します。
  • resource groupを選択します。
  • チェック・ボックスをクリックして、ご使用条件と条件に同意します。
  • Create をクリックします。

Safari 資格情報の取得

  • Apple Worldwideの中間証明書をキーチェーンに追加 します。

    Certificates, Apple Worldwide Intermediate certificate Site
    Certificates, Identifiers & Profiles

    Certificates, Apple Worldwide Intermediate certificate Add
    Certificates, Identifiers & Profiles

  • Apple DeveloperアカウントでWeb Push IDを作成します。

    Web プッシュ ID (バンドル ID) は、特定のアプリケーションを識別する固有 ID です。 各アプリケーションにはWeb Push IDが必要です。

  • Appleのデベロッパーポータルにアクセスし、「Certificates, Identifiers & Profiles 選択する。

    証明書、識別子、プロファイル*
    *証明書、識別子、

  • Identifiers > Add identifier buttonに移動します。

    caption-side=bottom"
    識別子ボタン
    *識別子ボタン

  • Add a new Identifier ボタンをクリックする。

    新しい識別子を追加するボタン
    *新しい識別子を追加するボタン
    新しい識別子を追加するボタン

  • 「Web プッシュ IDs」オプションを選択します。

    ウェブプッシュIDオプション
    IDオプション
    ウェブプッシュIDオプション

  • Web プッシュ ID の ID と説明を指定します。ID は、web.com.example.domain などの Web プッシュ ID の固有のリバース・ドメイン・ストリングです (ストリングの先頭は Web でなければなりません)。 Web サイトが yourwebsite.com の場合は、ID を Web.com.yourWeb サイトとして追加します。

    caption-side=bottom"
    ウェブプッシュID
    *ウェブプッシュID

  • 続けて、次のページで「Create certificate クリックする。

    証明書作成ボタン
    *証明書作成
    *証明書作成ボタン

    証明書ページ
    *作成 証明書ページ
    作成

  • KeyChainを使用して証明書署名要求を作成し、ディスクに保存する。 詳しくは、 こちらを参照してください。

    証明書署名
    する
    証明書署名*証明書署名を作成する

    証明書署名
    する
    証明書署名*証明書署名を作成する

  • CertificateSigningRequest.certSigningRequest をアップロードし、Continue をクリックします。

    証明書署名
    ロード*証明書署名アップロード
    署名アップロード

    ![証明書ダウンロードページ](images/en_safari_download_page.png "証明書ダウンロードページ*証明書" caption-side="bottom"}の"){: caption="ロード

  • .cer 拡張子が付いた証明書をダウンロードし、ダブルクリックします。 キーチェーンアクセス→マイ証明書に追加されます。

  • キーチェーンアクセス→マイ証明書を選択し、証明書をエクスポートします。

    エクスポート証明書*
    ロード証明書
    *

    ![証明書のエクスポート](images/en_safari_add_password_p12.png "の追加証明書のエクスポート パスワードの追加証明書" caption-side="bottom"}の"){: caption="ロード証明書のエクスポート パスワードの追加証明書署名のアップロード

  • パスワードを追加し (忘れないでください)、p12 証明書として保存します。

汎用 API ソースの追加

次のステップを実行します。

  • Event Notifications ダッシュボードのSourcesセクションに移動します。
  • Addをクリックし、API ソースを選択します。
  • 名前とオプションの説明を入力し、Addをクリックします。

Event Notifications 宛先の作成

Event Notifications コンソールでDestinationsをクリックし、以下の宛先詳細を追加します。

  • Name: 宛先の名前を追加します。

  • Description: 宛先の説明 (オプション) を追加します。

  • Type: ドロップダウン・リストから「Safari Push Notifications」タイプを選択します。

  • 宛先計画 (実動前宛先または実動宛先) を選択します。

    • Pre-production destination-開発環境およびテスト環境用の低コストのプッシュ宛先としてこの宛先を選択します。
    • Production destination-この宛先の全機能を使用します。 デバイスと送信メッセージは無制限。

  • Safariプッシュ認証情報を更新します。

    • Website Name: Web サイト名。 これは通知センターで使用される見出しです。
    • Website push ID: Web サイト・プッシュ ID の固有のリバース・ドメイン・ストリング (Web.com.example.domain など) (ストリングの先頭は web でなければなりません)。
    • Website URL: Safari Push Notifications へのサブスクライブを許可する必要がある Web サイトの URL。
    • URL format string: 通知がクリックされたときに移動するURL。 通知を配信する際に完了する引数のプレースホルダとして、%@を使用してください。 このURLはhttpまたはhttpsスキームを使用しなければならない：そうでない場合は無効である。
    • p12証明書をアップロードし、証明書「password」を提供する。

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を設定します。サファリウェブSDK

Safari Web SDK は、Safari 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ウェブプッシュ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>",
   "safariDestinationId": "<safari_destination_id>",
   "websitePushIdSafari": "<Safari Web Push Id Identifier>"
}

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メソッドはもう1つのパラメータ、'userId を受け付けます。

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

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

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

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

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

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

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

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