Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
microCMS と Firebase Clound Messaging で実現する Web ...
Search
stin
April 19, 2023
Programming
0
750
microCMS と Firebase Clound Messaging で実現する Web Push 通知
stin
April 19, 2023
Tweet
Share
More Decks by stin
See All by stin
ジャムスタックチョットデキル_シブヤ_LT資料
stin
1
850
Other Decks in Programming
See All in Programming
イベント駆動で成長して委員会
happymana
1
330
Quine, Polyglot, 良いコード
qnighy
4
650
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Jakarta EE meets AI
ivargrimstad
0
130
みんなでプロポーザルを書いてみた
yuriko1211
0
280
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
初めてDefinitelyTypedにPRを出した話
syumai
0
420
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Adopting Sorbet at Scale
ufuk
73
9.1k
Automating Front-end Workflow
addyosmani
1366
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Being A Developer After 40
akosma
87
590k
Thoughts on Productivity
jonyablonski
67
4.3k
Practical Orchestrator
shlominoach
186
10k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Transcript
microCMS と Firebase Clound Messaging で 実現する Web Push 通
知
About Me すてぃん chot Inc. フロントエンドエンジニア https://twitter.com/stin_factory
内容について 先に Zenn に投稿したハンズオン記事の内容を少しアップデートしてお 話します。 https://zenn.dev/chot/articles/web-push-with-microcms-and-fcm 未読の方でも内容が把握できるよう努めます。
概要 - microCMS - Firebase Cloud Messaging(以降 FCM) を用いて、架空のメディアサイトにWeb Push
通知で新着記事をお知ら せする機能を実装します。 記事にはカテゴリーが設定されており、プッシュ通知はカテゴリー別に購 読できるように実装します。
試してみたきっかけ ついに iOS Safari にも Web Push 通知が実装されて、プッシュ通知を 搭載したWebサイト開発が現実的になりました。 chot
Inc. が得意とする microCMS を使った Jamstack 開発でも、iOS サポートを含むプッシュ通知の実装が必要になっていくでしょう。 その準備として、microCMS と FCM による実装を学びます。
話さないこと - microCMS, Firebase のプロジェクト作成手順 - microCMS, Firebase の SDK
インストール手順 - Firebase CLI インストール手順 - microCMS を使った Web サイトの作り方など かなり掻い摘んでお話しますので、ブログ記事や公開しているソース コード等も併せて御覧ください
microCMS とは - 国産のヘッドレスCMS - コンテンツを JSON 形式で取得できる - コンテンツ編集時の
Webhook 機能 ⭐ コンテンツを追加したタイミングの Webhook をプッシュ通知に利用しま す (無料プランの範囲で試すことができます!)
Firebase Cloud Messaging とは - Firebase が提供するプッシュ通知サービス - Web に限らずネイティブアプリにも対応
- 完全無料で使用可能 Cloud Functions for Firebase, Firestore も併用して実装します。 (Functions は従量課金プランでないと使用できませんが無料枠が大き いので気軽に試せます!)
サービス構成
microCMS のスキーマ設定
通知設定画面を用意 microCMS から取得したカテゴリー一覧 から通知設定画面をビルドします このチェックボックスは…
通知設定画面を用意 Firestore のドキュメントにこんなデータ を保存します token は FCM の Client SDK
で取得で きるトークンで、Functions で使います (通知送信先デバイスの識別子です)
通知設定を FCM に反映 通知設定を保存した Firestore ドキュメントの更新イベント(onCreate, onUpdate)で Functions をトリガーします Functions
では FCM の Admin SDK によってトークンとトピック(記事カ テゴリー)の紐付けを行います
None
Webhook を受け取ってプッシュ通知を送信する 同じく Functions で https リクエストを受け付ける関数を用意します。 microCMS の記事作成時に送信される Webhook
を受け取るための関 数です。 Webhook のリクエストボディに含まれる記事データからカテゴリーを確 認して通知送信を行います。
webhook に microCMS からのリクエストボディが含まれています。 webpush.fcmOptions.link は通知バーをクリックしたらブラウザが開く URL。
microCMS で Webhook の設定をする microCMS 管理画面の {コンテンツ} > API 設定
> Webhook で、コンテンツ編集時の Webhook を設定できます。 Functions で作成した https 関数の URL を指定し、コンテンツ公開時 に送信されるような設定にしておきます。
None
通知を送信してみる! microCMS で記事を作成すると、 プッシュ通知が配信されます! 通知をタップすれば記事詳細ページ がブラウザで開かれます。 右の画像は Android Chrome の通知
バーです。
まとめ microCMS と Firebase Cloud Messaging を組み合わせてプッシュ通 知を送信するサイトの実装方法を紹介しました。 - サイト上で購読設定を
Firestore に保存して、 Functions でトピック 購読設定 - microCMS から Webhook を Functions に送信 - Functions で記事カテゴリーをトピックとして通知送信
まとめ 実際にデプロイされたデモサイト https://microcms-notification-media.vercel.app/ ソースコード https://github.com/y-hiraoka/microcms-notification-media 本内容は掻い摘んでいるので、より詳細な手順は是非ブログもご覧ください https://zenn.dev/chot/articles/web-push-with-microcms-and-fcm
それではよい PWA ライフを!