Firebase（FCM）を使用してWebプッシュ通知を送信する方法は？

公開: 2021-12-29

Firebaseは、Web、IOS、Androidでの通知サービスを容易にするために、クラウドサービスを使用しています。 Firebase Cloud Messaging（FCM）は、デバイスごとに一意のトークンを生成し、後でそれぞれのデバイスにメッセージを送信するためにそれらを使用することで動作します。 ウェブプッシュ通知を送信するために、Firebaseはjavascriptを使用してトークンを生成します。

このブログでは、ウェブプッシュ通知のFirebaseを実装する方法についてすべてを知ることができます。

Firebase Cloudメッセージングとは何ですか？

What-is-Firebase-Cloud-Messaging

Firebase Cloud Messagingは、Googleの無料のモバイル通知サービスです。 サードパーティのアプリ開発者は、Googleクラウドメッセージング（GCM）サーバーからユーザーに通知を送信できます。 これにより、同期に利用できるさまざまなデータについてリアルタイムでユーザーに通知できます。

ユーザーのアプリからFCMサーバーにメッセージをアップストリームし、FCMサーバーからユーザーのアプリにメッセージをダウンストリームします。 FCMを使用すると、ユーザーが世界のどこにいるかに関係なく、ユーザーを引き付け、維持し、再ターゲットすることができます。

Firebaseを使用してウェブプッシュ通知を送信するメリットは何ですか？

Firebaseからウェブプッシュ通知を送信するメリットは次のとおりです。

  • 開始は無料： FCMを利用するためにGoogleに支払う必要はありません プッシュ通知サービス。 その上、スケーリングは簡単です。  
  • アクセス許可についての心配はありません： FCMライブラリはマニフェストのマージを使用するため、必要なアクセス許可が自動的に追加されます。 これにより、必要な労力が削減されます。
  • 簡略化された登録： FCMがメッセージをデバイスに配信するために使用するアドレスは、「登録トークン」と呼ばれます。 このプロセスは現在非同期になっています。 Googleライブラリには、ユーザーに代わってトークンが自動的に割り当てられます。 したがって、トークンをリクエストすると、登録トークンが送信されます。 メッセージングを開始するには、このトークンをサーバーに送信する必要があります。
  • 簡単な実装： FCMの実装は迅速かつ簡単です。 直感的なAPIは単一のSDKで利用できるため、複雑なインフラストラクチャを構築することなく、顧客の問題にすぐに対処できます。
  • 分析： Firebaseから無料で無制限の分析を利用できます。 ユーザーのアプリの使用状況、広告のクリック数などに関する貴重なデータを取得できます。 その他のFirebase機能は、FirebaseAnalyticsでうまく機能します。 だから、あなたはすべてに行動することができます。
  • クロスプラットフォームのサポート：APIはC ++、JavaScript、Android、iOSの単一のSDKで利用できるため、インフラストラクチャを変更することなく、さまざまなプラットフォームに拡張できます。
  • 一般的なトピックメッセージ：特定のトピックに関心のあるユーザーに通知する場合は、メッセージをFCMに公開するだけです。 FCMは、そのトピックにサブスクライブしているすべてのユーザーに配信します。 最良の点は、トピックメッセージングに制限がないことです。
  • さまざまなトピックのメッセージング： FCMを使用すると、顧客のセグメンテーションで関連するメッセージを送信することもできます。 たとえば、交通関連の通知をユーザーに送信する場合、都市Aのユーザーは自分の都市のみに関連する交通メッセージを受信し、都市Bのユーザーは自分の都市のみに関連する交通メッセージを受信します。

Firebaseを使用してウェブプッシュ通知を送信するにはどうすればよいですか？

Webプッシュ通知Firebaseの実装に役立つステップバイステップの手順は次のとおりです。

1.Firebaseアプリを登録する

登録-Firebase-アプリ
  1. このリンクhttps://console.firebase.google.com/u/0/にアクセスし、[プロジェクトの追加]タブを押します。
  2. プロジェクト名を付けて国を選択します。 次に、[プロジェクトの作成]タブを押します。 Googleは、プロジェクト名の可用性と一意性を確認します。
  3. 次に、[利用規約に同意する]タブをクリックして続行します。 あなたのプロジェクトは内に構築されます
  4. 数秒。
  5. 次に、Android / IOS / Web/Unityアプリをプロジェクトに追加します。 このブログはウェブプッシュ通知Firebaseに焦点を当てているため、</>として表示されているウェブアイコンをクリックして続行する必要があります。
  6. アプリにニックネームを付けます。 このニックネームはユーザー専用です。 そのため、この機能を使用して、プロジェクト内のアプリを内部で使用するための差別化を容易にすることができます。
  7. プロジェクトがHTTPSサーバーで実行されていない場合は、そのホスティングを追加します。 そうでない場合は、この手順をスキップしてください。
  8. 次に、[アプリの登録]をクリックします。  
  9. アプリが登録されたので、コードであるFirebaseSDKを受け取ります。 このコードをコピーしてください

下。 これは、次のセクションで使用されるようになります。 これを今すぐコピーしない場合は、[設定]セクションから取得できます。

2.プロジェクトにFirebaseを追加します

プロジェクトにFirebaseを追加
  1. ダッシュボードに移動します。 サイドバーには、「設定」アイコンがあります。 クリックして。 表示されるメニューで、[プロジェクト設定]をクリックします。
  2. [設定]ページ（[一般設定]）が開いたら、ページの一番下までスクロールして、選択したCDNに表示されているコードをコピーします。
  3. 最後に、HTMLファイルに次のコードを含めます。 Firebaseメッセージング用のCDNスクリプトも含めます。

<script src =“ https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js " > </ script>

<script src =“ https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js " > </ script>

3.Firebaseサービスの運用

1.上部に記載されているコードについては、下部にあるコードを追加します。//Firebaseを初期化します。

//Firebaseを初期化します

firebase.initializeApp（firebaseConfig）; const Messaging = firebase.messaging（）; //Firebaseサービスを実行するために作成されたカスタム関数

  getStartToken（）; //このコードはサーバー/アプリからメッセージを受信し、ブラウザでプロジェクトの時点で同じタブが開いている場合はコンソールにメッセージを出力します

Messaging.onMessage（function（payload）{console.log（ "onMessage"、payload）;}）;

2.下部のコードをHTMLページにある別のjsファイルに書き込むか、上部のコードの<script>タグに追加することができます。

Messaging.getToken（）は、FirebaseSDKを使用してトークンを取得するために使用される関数です。 トークンが見つかった場合は、サーバーに送信されて保存されます。それ以外の場合は、RequestPermission（）関数を介してユーザーのアクセス許可が求められます。

setTokenSentToServer（）は、ローカルストレージを利用して、トークンがサーバーに送信されている場合はsendTokenToServerの値として1を割り当て、トークンがサーバーに送信されたときにエラーが発生したためにトークンがサーバーに送信されていない場合は0を割り当てる別の関数です。サーバーまたはFirebaseSDKから取得されます。

4.プロジェクトからの通知の送信

プロジェクトからのメッセージの送信

プロジェクトから通知を送信するために必要なすべての準備が整ったので、トークンを知っているエンドユーザーに通知を送信する方法の詳細を次に示します。

1.最初に、サービスキーを受け取る必要があります。 次の手順を実行します-

  • Firebaseコンソールを開きます
  • プロジェクト設定をクリックします
  • [クラウドメッセージング]をタップします
  • [サーバーキー]フィールドにコードがあります。 それをコピーします。

2.プッシュ通知の送信

postmanプラットフォームを使用して、Firebaseからウェブプッシュ通知を送信しましょう。 これがあなたがする必要があることです-

3.POSTリクエストタイプを設定します。

4.次のURLを入力します：https：//fcm.googleapis.com/fcm/send

5.[ヘッダー]セクションをクリックします。

承認とコンテンツタイプの2つのヘッダーを入力する必要があります。

・認証：コピーしたサーバーキーを貼り付けます。

・コンテンツタイプ：application / JSON（JavaScript Object Notation）

6.次に、[本文]セクションをクリックして開きます。 ユーザー登録時にFirebaseが取得したユーザートークンを貼り付けます。

7.リクエストを送信します。 サーバーからユーザーにプッシュ通知を送信できるようになります。

最初のプッシュ通知をユーザーに送信すると、Webブラウザーはユーザーに通知を受信する許可を求めることに注意してください。 彼/彼女が許可を与えた場合にのみ、あなたは継続的にプッシュを送信することができます。 プッシュ通知のヒントに従うことで、ユーザーが確実に許可を与えることができます。

まとめFirebaseを使用してウェブプッシュ通知を送信することは、思ったほど難しくないことをご存知でしょう。 多くのリソースを必要とせず、時間もかかりません。 その上、使用する ウェブプッシュ通知Firebaseは、ウェブサイトのメンテナンスやウェブアプリケーションの費用に影響を与えません。 その機能の詳細がまだ必要な場合は、Firebaseのドキュメントをご覧ください。

製品ツアーに参加する

また読む：

  • Webプッシュ通知の7つの過大評価された要因
  • Webプッシュ通知| ダイレクトメールマーケティングの戦術
  • マーケターが知る必要のある41のWebプッシュ通知統計
  • 152022年の最高のプッシュ通知ソフトウェアとツール{比較}
  • Webプッシュ通知は他のマーケティング媒体よりもどのように効果的ですか？