Angular/プッシュ通知（IBM Cloud）

2020年12月24日 10:35

Web ブラウザーの場合

IBM Cloud Push Notifications サービス・インスタンスを作成する

Pushサービス・プロバイダーの資格情報を入手する
Firebase Cloud Messaging (FCM) 資格情報 (送信側 ID および API キー) を取得する必要があります。
Google Chrome ブラウザー、Chrome のアプリケーションおよび拡張機能、Android デバイスにプッシュ通知を配信するために使用されます。
・API キー：IBM Cloud Push Notifications サービスによって安全に保管され、FCM サーバーに接続するために使用されます。
・送信側 ID (プロジェクト番号) ：クライアント側の Android SDK (Google Chrome ) および JS SDK (Mozilla Firefox) によって使用されます。

Google ユーザー・アカウントでFirebase コンソールにアクセスします。
・「プロジェクトを作成」をクリックします。
・「プロジェクトを作成」ウィンドウで、プロジェクト名を指定し、ご利用条件を受け入れて、トグル・スイッチを選択して Google アナリティクス (オプション) を有効または無効にしてから、「続行」をクリックします。
・Google アナリティクスを有効にした場合は「Google アナリティクスの構成 (Configure Google Analytics)」ウィンドウで、「アナリティクスの場所 (Analytics location）」を選択し、ご利用条件を受け入れます。
・「プロジェクトを作成」をクリックします。
新規プロジェクトの準備ができたら「続行」をクリックします。
・ナビゲーション・ペインで、「Project Overview」の隣にある設定アイコンを選択し、「設定」 > 「プロジェクトの設定」を選択します。
・「クラウドメッセージング」タブをクリックして、プロジェクトの資格情報 (「サーバーキー」と「送信者 ID」) を表示します。

IBM Cloud Push Notifications サービス・インスタンスを構成する
ナビゲーション・メニューで、「サービスの構成」をクリックします。

・Chrome ブラウザーの場合
Chrome タイルで、「構成」をクリックします。
サイド・パネルで、プッシュ通知を受信するために登録する Web サイトの「Web サイト URL」を更新します。
「Google サーバー API キー」に入力します。
「保存」をクリックします。

・Firefox ブラウザーの場合
Firefox タイルで、「構成」をクリックします。
サイド・パネルで、プッシュ通知を受信するために登録する Web サイトの「Web サイト URL」を更新します。
「保存」をクリックします。

SDK のセットアップ
以下を実行済みであることを確認してください。
・通知サービス・プロバイダー資格情報の取得
・プッシュ・サービス・インスタンスの構成
プッシュ通知の登録、サブスクライブ、および受信を Push Notifications サービスを使用して行えるようにセットアップします。

インストール
プッシュ通知WebクライアントSDKパッケージをダウンロードします。

SDKを初期化します
ChromeおよびFirefoxWebブラウザ

ファイルをプロジェクトのルートフォルダーに追加します。BMSPushSDK.js、BMSPushServiceWorker.jsおよびmanifest_Website.json

manifest_Website.jsonファイルを編集します。
Chromeブラウザの場合：
{
" name "：" YOUR_WEBSITE_NAME "、
" gcm_sender_id "：" Firebase Cloud Messaging（FCM）[送信者ID] "
}
gcm_sender_id値は数値のみに注意してください。

注：gcm_sender_idBMSプッシュ初期化メソッドでapplicationServerKeyを使用している場合は、必要ありません。

Firefoxブラウザの場合：
{
" name "：" YOUR_WEBSITE_NAME "
}
manifest_Website.jsonファイル名をmanifest.jsonに変更します。

html<head>タグにmanifest.jsonを含めます。
< link rel = " manifest " href = " manifest.json " >

スクリプトにIBMCloudWebプッシュSDKを含めます。
< script src = " BMSPushSDK.js " async > </ script >

IBM Cloud Push Notifications サービス・通知の送信
ナビゲーション・メニューで、「通知」をクリックします。
「作成」をクリックして、メッセージを構成します。

「通知テキスト」、「通知タイトル」 (オプション)、「追加ペイロード」 (オプション) を指定して、新しい通知を作成します。
以下のいずれかのターゲットで「対象オーディエンス (Target audience)」を選択します。
「プラットフォーム」 - オプションは「Android」、「iOS」、「Web 通知」、「Chrome アプリケーションおよびエクステンション」、「Chrome ブラウザー」、「Firefox」、「Safari」、および「すべてのデバイス」です。
「タグ」 - タグ、トピック名を入力するか、タグを作成します。
「デバイス/ユーザー ID」 - 「デバイス ID」または「ユーザー ID」のどちらかを選択して、選択内容のデバイス ID/ユーザー ID の詳細を入力します。
「すべてのデバイス」オプションを選択すると、Push Notificationsをサブスクライブしているすべてのデバイスが通知を受け取ることになります。

オプションで、リッチ・メディア通知には、「詳細設定」を使用します。「優先順位」 (有効なオプション: 「デフォルト」、「最大」、「最小」、「低」、「高」) および送信する通知タイプ (「デフォルト」または「サイレント」) を選択します。
選択内容をすぐに確認するには、「確認」セクションを参照します。
「送信」をクリックします。

デバイスまたはブラウザーが通知を受信したことを確認します。

thanks

https://cloud.ibm.com/docs/mobilepush?topic=mobilepush-push_step_4
http://ibm-bluemix-mobile-services.github.io/API-docs/client-SDK/Web-Push/index.html

sample
Node https://github.com/ibm-bluemix-push-notifications/HelloPush-NodeJS
funk https://github.com/ibm-bluemix-push-notifications/HelloPush-CloudFunctions