2020/08/24

FCMでウェブプッシュ通知の実装

WRITER: y.harada

Firebase Cloud Messagingを使ってウェブプッシュ通知を実装します

SSL必須なので今回はFirebaseHostingを利用します

プロジェクト設定

まずはFirebaseプロジェクトにウェブアプリを登録します

ウェブ認証情報を設定します

プロジェクトの設定>Cloud Messaging>鍵ペアを生成

コンソールの作業はこれで終了です

FirebaseCLIのインストールと設定

FirebaseHostingを使うのでFirebaseCLIをインストールします

使わない場合は必要ありません

ブラウザが立ち上がるのでGoogleアカウントでFirebaseにログイン

プロジェクトのディレクトリで初期設定を行う

使用するFirebaseのサービスを選択します

今回はHostingを選択

既存のFirebaseプロジェクトか新規作成か選択

使用するプロジェクトの選択

デプロイするディレクトリの選択、デフォルトのpublicを使います

シングルページアプリケーションか?今回はNo

Firebase SDK の読み込み

SDKのパスが特殊なのはFirebaseHostingを使うからです

CDNから読み込むこともできます(後述)

メッセージング オブジェクトを取得する

ウェブ認証情報の設定で作成した公開鍵を登録します

登録トークンの取得

トークンをサーバーに保存しておくことで特定の端末に通知を送ることも可能になります

サービスワーカーの実装

ルートディレクトリにサービスワーカーを追加します

ファイル名はfirebase-messaging-sw.jsで固定ですが、

自前でregisterする場合は自由に命名できます

SDKの読み込みとメッセージング オブジェクトの取得する

デプロイ(FirebaseHostingの場合)

プッシュ通知の送信

新しい通知

タイトルとテキストを入力して次へ

送信先のウェブアプリを選択、今回はスケジュール設定は必要なので確認

公開

通知が受け取れれば成功です(タブを開いていると受け取れません)

フォアグランドで受信する

フォアグラウンド、タブを開いている状態で通知を受信するときは

HTMLに下記スクリプトを追加します

この状態で通知を送ると、フォアグラウンドで受け取ることができます

FirebaseHostingを使わない場合

FirebaseHostingを使わない場合、SDKの読み込みをCDN経由に変更し、

プロジェクト構成オブジェクトを使ってFirebaseを初期化する必要があります

構成オブジェクトはプロジェクト設定>全般>ウェブアプリを選択して取得できます

サービスワーカーにも同様の修正を加えます

y.harada

y.harada

Unityエンジニア
Reactが好き