こんにちは。
FCMを使ったWebPushについてまとめられたサイトは数多くあったんですが、
とりあえずどんなものか確認したい
ということで「テストまで最速で」をモットーにまとめてみました。
2019/07/04 時点の備忘録として共有します。
quickstartのURLは以下です。
https://github.com/firebase/quickstart-js/tree/master/messaging
Firebaseの登録
まずはじめにFirebaseのプロジェクトを作成します。
プロジェクト名を入力して「プロジェクトを作成」を押下。
プロジェクトができあがったら、開始するアプリで「Web」を選択。
アプリ名を適当に決めて登録したらFirebase設定が吐き出されます。
アプリ右側の歯車を押下。
「クラウドメッセージング」タブの下部にある「鍵ペアを生成」を押下。
鍵情報が発行されます。
サーバの設定
先ほど登録した内容を使ってサーバ側の設定をします。
今回はnginxを使っているのでDocumentRootは /usr/share/nginx/html/ にしています。
gistc43614a67a3753ef43c3d75bc22282ec
いじる必要があるのは index.html と firebase-messaging-sw.js の2ファイル。
それぞれの変更点はこんな感じ。
index.html
FCM index.html diff refs https://github.com/fireba ...
firebase-messaging-sw.js
FCM firebase-messaging-sw.js.patch diff refs https ...
これで設定は終わり。
テストしてみる
設定したページにアクセスすると、最初は通知許可がされていないので権限取得を必要とする。
「REQUEST PERMISSION」を押下する。
「許可」を押下すると、トークンIDを取得/表示する。
表示されたInstance ID Tokenを使って、WebPushを実験する。
gistebfbd1c1884bbe259a04fe806a906b92
クラウドメッセージングタブのサーバーキーをAUTH_KEYに、
Instance ID TokenをSEND_TOに入力し、curlを実行したらPush通知がされた。
細かい動きについては各スクリプトを読み解いてくださいな。
私からは 、以上です。
