Dartを使い、firebaseでWeb pushする。#Firebase #PWA #Dart

目標

Dartで作成したWebページに対し、FirebaseのコンソールからWebPushを行う。DartでPWAを作成し、Firebase Hostingにリリース。WebPushを登録する。

どういうこと?

Firebaseの管理画面から通知処理を行おうとする際、ユーザーセグメントの項目からPushを行おうとするとAndroid or iOSのアプリ単位での指定となり、Webを指定することができない。隣のタブにある「トピック」という項目から指定することになる。しかし、トピックというのはどうやって登録するのだろう?答えは以下のドキュメントに書いてある。

参考ドキュメント

必要な作業

  • ウェブアプリマニフェストに指定の値を追加
  • ブラウザ上で通知の受信許可を求め、登録トークンを取得する。
  • 取得したトークンをInstanceIDServiceに登録
  • Firebaseの管理画面からトピックでメッセージを送信。

ウェブアプリマニフェストに以下を追加する

{
  "gcm_sender_id": "103953800507"
}
この値はFCMを使う場合、すべてのFCM JavaScript クライアントで共通です。

■登録トークンを取得する。

firebase.messaging();オブジェクトから所々操作が可能になっている。
登録したトークンをサーバーサイドに送る。
ちなみに、取得したTokenをそのままInstanceIDServiceに送ったらいいじゃないか?と思わなくも無いのですが、その場合、通知に使う鍵もクライアントに組み込む事になり、セキュリティの問題からNGとなります。(不特定多数がPush通知を送れてしまう)

■登録作業

というわけで、サーバーサイド側で、token+鍵の情報を組み合わせてInstanceIDserviceに送信します。Cloud Functionsでやる例は最後のGistに。

■メッセージ送信

管理画面からメッセージを作成して、届くか試してみよう!

注意

  • Webページを開いているときはWebページ側のイベントが発火。
  • Webページを閉じている場合はServiceWorkerのイベントが発火。

 ひとつの作業は単純ですが、各工程がうまくいっているか?を確認する術が少なく、PUSHを実行するまでうまくいってるのか確認しづらい。というのがあると思います。
トークンを取得、Serviceに登録、PUSH通知の実行。と手順を踏みながら作業を行いましょう。

最後に利用したコード等

エラー処理等は省略しております。予めご了承。

0 件のコメント :