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
900
microCMS と Firebase Clound Messaging で実現する Web Push 通知
stin
April 19, 2023
Tweet
Share
More Decks by stin
See All by stin
ジャムスタックチョットデキル_シブヤ_LT資料
stin
1
970
Other Decks in Programming
See All in Programming
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
4
530
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
150
Goで作る、開発・CI環境
sin392
0
240
VS Code Update for GitHub Copilot
74th
2
660
GPUを計算資源として使おう!
primenumber
1
190
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
140
CDK引数設計道場100本ノック
badmintoncryer
1
230
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
GitHub's CSS Performance
jonrohan
1031
460k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What's in a price? How to price your products and services
michaelherold
246
12k
A Modern Web Designer's Workflow
chriscoyier
695
190k
A Tale of Four Properties
chriscoyier
160
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
Site-Speed That Sticks
csswizardry
10
690
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 ライフを!