目標
Dartで作成したWebページに対し、FirebaseのコンソールからWebPushを行う。DartでPWAを作成し、Firebase Hostingにリリース。WebPushを登録する。どういうこと？
Firebaseの管理画面から通知処理を行おうとする際、ユーザーセグメントの項目からPushを行おうとするとAndroid or iOSのアプリ単位での指定となり、Webを指定することができない。隣のタブにある「トピック」という項目から指定することになる。しかし、トピックというのはどうやって登録するのだろう？答えは以下のドキュメントに書いてある。参考ドキュメント
- https://firebase.google.com/docs/cloud-messaging/js/topic-messaging?hl=ja
- https://developers.google.com/instance-id/?hl=ja
- DartのPWA周り：https://qiita.com/kyorohiro/items/4ab34f17a5eec8ca811c
- functionsをDartで：https://github.com/pulyaevskiy/firebase-functions-interop
- DartのFirebase SDK：https://pub.dartlang.org/packages/firebase
必要な作業
- ウェブアプリマニフェストに指定の値を追加
- ブラウザ上で通知の受信許可を求め、登録トークンを取得する。
- 取得したトークンをInstanceIDServiceに登録
- Firebaseの管理画面からトピックでメッセージを送信。
■ウェブアプリマニフェストに以下を追加する
この値はFCMを使う場合、すべてのFCM JavaScript クライアントで共通です。{ "gcm_sender_id": "103953800507" }
■登録トークンを取得する。
firebase.messaging();オブジェクトから所々操作が可能になっている。登録したトークンをサーバーサイドに送る。
ちなみに、取得したTokenをそのままInstanceIDServiceに送ったらいいじゃないか？と思わなくも無いのですが、その場合、通知に使う鍵もクライアントに組み込む事になり、セキュリティの問題からNGとなります。(不特定多数がPush通知を送れてしまう)
■登録作業
というわけで、サーバーサイド側で、token＋鍵の情報を組み合わせてInstanceIDserviceに送信します。Cloud Functionsでやる例は最後のGistに。■メッセージ送信
管理画面からメッセージを作成して、届くか試してみよう！
注意
- Webページを開いているときはWebページ側のイベントが発火。
- Webページを閉じている場合はServiceWorkerのイベントが発火。
ひとつの作業は単純ですが、各工程がうまくいっているか？を確認する術が少なく、PUSHを実行するまでうまくいってるのか確認しづらい。というのがあると思います。
トークンを取得、Serviceに登録、PUSH通知の実行。と手順を踏みながら作業を行いましょう。
0 件のコメント :
コメントを投稿