Slide 1

Slide 1 text

microCMS と Firebase Clound Messaging で 実現する Web Push 通 知

Slide 2

Slide 2 text

About Me すてぃん chot Inc. フロントエンドエンジニア https://twitter.com/stin_factory

Slide 3

Slide 3 text

内容について 先に Zenn に投稿したハンズオン記事の内容を少しアップデートしてお 話します。 https://zenn.dev/chot/articles/web-push-with-microcms-and-fcm 未読の方でも内容が把握できるよう努めます。

Slide 4

Slide 4 text

概要 - microCMS - Firebase Cloud Messaging(以降 FCM) を用いて、架空のメディアサイトにWeb Push 通知で新着記事をお知ら せする機能を実装します。 記事にはカテゴリーが設定されており、プッシュ通知はカテゴリー別に購 読できるように実装します。

Slide 5

Slide 5 text

試してみたきっかけ ついに iOS Safari にも Web Push 通知が実装されて、プッシュ通知を 搭載したWebサイト開発が現実的になりました。 chot Inc. が得意とする microCMS を使った Jamstack 開発でも、iOS サポートを含むプッシュ通知の実装が必要になっていくでしょう。 その準備として、microCMS と FCM による実装を学びます。

Slide 6

Slide 6 text

話さないこと - microCMS, Firebase のプロジェクト作成手順 - microCMS, Firebase の SDK インストール手順 - Firebase CLI インストール手順 - microCMS を使った Web サイトの作り方など かなり掻い摘んでお話しますので、ブログ記事や公開しているソース コード等も併せて御覧ください

Slide 7

Slide 7 text

microCMS とは - 国産のヘッドレスCMS - コンテンツを JSON 形式で取得できる - コンテンツ編集時の Webhook 機能 ⭐ コンテンツを追加したタイミングの Webhook をプッシュ通知に利用しま す (無料プランの範囲で試すことができます!)

Slide 8

Slide 8 text

Firebase Cloud Messaging とは - Firebase が提供するプッシュ通知サービス - Web に限らずネイティブアプリにも対応 - 完全無料で使用可能 Cloud Functions for Firebase, Firestore も併用して実装します。 (Functions は従量課金プランでないと使用できませんが無料枠が大き いので気軽に試せます!)

Slide 9

Slide 9 text

サービス構成

Slide 10

Slide 10 text

microCMS のスキーマ設定

Slide 11

Slide 11 text

通知設定画面を用意 microCMS から取得したカテゴリー一覧 から通知設定画面をビルドします このチェックボックスは…

Slide 12

Slide 12 text

通知設定画面を用意 Firestore のドキュメントにこんなデータ を保存します token は FCM の Client SDK で取得で きるトークンで、Functions で使います (通知送信先デバイスの識別子です)

Slide 13

Slide 13 text

通知設定を FCM に反映 通知設定を保存した Firestore ドキュメントの更新イベント(onCreate, onUpdate)で Functions をトリガーします Functions では FCM の Admin SDK によってトークンとトピック(記事カ テゴリー)の紐付けを行います

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Webhook を受け取ってプッシュ通知を送信する 同じく Functions で https リクエストを受け付ける関数を用意します。 microCMS の記事作成時に送信される Webhook を受け取るための関 数です。 Webhook のリクエストボディに含まれる記事データからカテゴリーを確 認して通知送信を行います。

Slide 16

Slide 16 text

webhook に microCMS からのリクエストボディが含まれています。 webpush.fcmOptions.link は通知バーをクリックしたらブラウザが開く URL。

Slide 17

Slide 17 text

microCMS で Webhook の設定をする microCMS 管理画面の {コンテンツ} > API 設定 > Webhook で、コンテンツ編集時の Webhook を設定できます。 Functions で作成した https 関数の URL を指定し、コンテンツ公開時 に送信されるような設定にしておきます。

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

通知を送信してみる! microCMS で記事を作成すると、 プッシュ通知が配信されます! 通知をタップすれば記事詳細ページ がブラウザで開かれます。 右の画像は Android Chrome の通知 バーです。

Slide 20

Slide 20 text

まとめ microCMS と Firebase Cloud Messaging を組み合わせてプッシュ通 知を送信するサイトの実装方法を紹介しました。 - サイト上で購読設定を Firestore に保存して、 Functions でトピック 購読設定 - microCMS から Webhook を Functions に送信 - Functions で記事カテゴリーをトピックとして通知送信

Slide 21

Slide 21 text

まとめ 実際にデプロイされたデモサイト 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

Slide 22

Slide 22 text

それではよい PWA ライフを!