Webプッシュ通知触ってみた

2023/2月に行われたサークル内追い出しLTの資料です

イベントページはこちら
https://zli.connpass.com/event/275487/

Transcript

1. Webプッシュ通知 触ってみた 追い出しLT 2023/02/22
2. • 学年：28期 • 所属：会津大学コンピュータ理工学部 • 今興味のある技術：Go, Haskell, Rustで競プ ロ • 趣味： ◦ モンハン ▪ 燃えないゴミはもう無いんだよ ◦ イカᔦꙬᔨ ◦ FGO ▪ 2部7章良かったね • Twitter：@matumoto_1234 matumoto 松本 響輝 自己紹介
3. 今回触ってみた技術 • Webプッシュ通知
4. FirebaseCloudMessaging(FCM)の概要 • Firebaseサーバーに送り先を登録する • Firebaseサーバーから送り先に対してプッシュ通知を送る
5. 送り先の登録処理 • デバイスで登録をする場合
6. 送り先の登録処理 • ブラウザで登録する場合
7. 送り先の登録処理 • では何に登録させるか？ ◦ サイトごとに一意なものに登録させる（ PushSubscriptionが発生する） ◦ Firebaseが用意しているSDKでmasseging.getToken(**省略*/)を呼び出す と登録トークンがFirebase側で発行されて返される（2回目以降はキャッシュされたも のが返される）
8. 送られるとどうなるか • 送り先がサイトごとに一意 ◦ じゃあサイトを開いていないときとかは通知が来ないのでは？ ◦ →ちゃんと来てくれる ▪ ServiceWorkerが受け取っている ServiceWorker 通知許可
9. ServiceWorkerについて • ServiceWorker発火などでなんらかの動作をしたい ◦ ServiceWorkerAPIが実は提供されている
10. 実際に送るには • FirebaseConsoleからプッシュ通知を送ることができる • Firebase Admin SDKからも同じように送れる
11. 実際に送るには • Firebase Admin SDKを使うメリット ◦ アプリのサーバー側から通知を叩ける
12. 実装編
13. 実装 • Firebaseプロジェクトを作って、生成されるサーバーキーとかを保管 • firebase-toolkitsをPCにインストール • $ firebase initとかをして生成されるindex.htmlなどのファイルに、さっきのサーバー キーとかをコピペ • $ firebase serve でローカルファイルをホスティング • ホスティングしたlocalhost:5000とかに行って通知を許可 • FirebaseConsole（Web画面）から通知を送る • AC
14. デモ
15. ご卒業 おめでとうございます！ 社会人になっても健康でいやがれください