Google Chrome拡張機能のGCM(FCM) API利用例 ～Instance IDもあるよ～
Google Chrome拡張機能の開発でFirebase Cloud Messaging
(旧名称: Google Cloud Messaging) API
(chrome.gcm, chrome.instanceID)
を利用しようしたところ、ウェブ上でほとんどドキュメントが見つからなかったため利用例を公開する。
最小限の動作例
事前にFirebase consoleで作成したプロジェクトの設定→クラウドメッセージングから「サーバーキー」と「送信者ID」を取得しておく。
プロジェクトをcloneしたら"send.js"のYOUR_SERVER_KEYを「サーバーキー」に、"receive.js"のYOUR_SENDER_IDを「送信者ID」に置き換えれば動作するようになる。
「サーバーキー」のほうは秘密鍵になるので注意。
そういえばFCM(GCM)ってどんな動作するんだっけ
スマホ→GMS「push通知ください！」
— レオ@アイコンのワドルディかわいい (@reosablo) 2018年2月24日
GMS→スマホ「はいよっ！(token投げる)」
スマホ→サーバ「push通知これ宛にください！(tokenとcookie投げる)」
サーバ「はいよっ！」
サーバ→GMS「push通知これ宛に送れください！(tokenとデータ投げる)」
GMS→スマホ「くらえーっ!!(データ投げる)」
前述のプロジェクトで言えばevent page (receive.js)がスマホ、browser action (send.js)がサーバの役割に相当する。
event pageが取得したtokenはchrome.strorageを通じて読み取っている。
クライアントサイド(push通知受信側)の動作
1. tokenを取得する
まずはchrome.instanceID.getTokenでtokenを取得する。
token取得時の引数tokenParamsオブジェクトのscopeプロパティには"GCM"、authorizedEntityプロパティには「送信者ID」文字列を指定する。
このtokenはAPI内部で保持されており、よっぽどのことが無い限り変更されることはない。
もしAPI内部のtokenが変更されてしまった場合はchrome.instanceID.onTokenRefreshイベントが
発生するので、捕捉してtokenを取得しなおす必要がある。
2. FCMからのpush通知をlistenする
tokenを取得出来た時点ですでにFCM側から拡張機能へ通知を発行する準備はできているので、拡張機能側で受け取る準備として
chrome.gcm.onMessageイベントをlistenする。
3. サーバにtokenを渡す
サーバ側でtokenを受け取るAPIを用意したり、手書きでtokenをメモして伝書鳩に託すなど好きな方法でtokenを渡せばよい。
あとはサーバがtokenを使って通知を発行すればchrome.gcm.onMessageイベント経由でデータを受け取ることができる。
サーバサイド(push通知送信側)の動作
1. tokenを受け取る
伝書鳩からメモを受け取った場合はO(オー)と0(ゼロ)などの読み間違いに注意する。
ここまでくればpush通知を発行する準備はすべてできている。
2. FCMにデータを送信する
気が向いたときに通知データをhttps://fcm.googleapis.com/fcm/send宛にPOST送信する。
HTTPヘッダのAuthorizationフィールドにはkey=に続けて「サーバーキー」を設定する。
API扱ってみた感想
chrome.instanceIDでtoken取得したらchrome.gcmにtoken与えて何かしなきゃいけない気がしてたけど全然そんなことなかった。わかりにくいわっ！- APIリファレンスに動作例が載っててほしかった。
最終的にこんなもんできました。伝書鳩飛ばすのが難しかったです。
