Upgrade to Pro — share decks privately, control downloads, hide ads and more …

microCMS と Firebase Clound Messaging で実現する Web ...

stin
April 19, 2023

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

stin

April 19, 2023
Tweet

More Decks by stin

Other Decks in Programming

Transcript

  1. 概要 - microCMS - Firebase Cloud Messaging(以降 FCM) を用いて、架空のメディアサイトにWeb Push

    通知で新着記事をお知ら せする機能を実装します。 記事にはカテゴリーが設定されており、プッシュ通知はカテゴリー別に購 読できるように実装します。
  2. 試してみたきっかけ ついに iOS Safari にも Web Push 通知が実装されて、プッシュ通知を 搭載したWebサイト開発が現実的になりました。 chot

    Inc. が得意とする microCMS を使った Jamstack 開発でも、iOS サポートを含むプッシュ通知の実装が必要になっていくでしょう。 その準備として、microCMS と FCM による実装を学びます。
  3. 話さないこと - microCMS, Firebase のプロジェクト作成手順 - microCMS, Firebase の SDK

    インストール手順 - Firebase CLI インストール手順 - microCMS を使った Web サイトの作り方など かなり掻い摘んでお話しますので、ブログ記事や公開しているソース コード等も併せて御覧ください
  4. microCMS とは - 国産のヘッドレスCMS - コンテンツを JSON 形式で取得できる - コンテンツ編集時の

    Webhook 機能 ⭐ コンテンツを追加したタイミングの Webhook をプッシュ通知に利用しま す (無料プランの範囲で試すことができます!)
  5. Firebase Cloud Messaging とは - Firebase が提供するプッシュ通知サービス - Web に限らずネイティブアプリにも対応

    - 完全無料で使用可能 Cloud Functions for Firebase, Firestore も併用して実装します。 (Functions は従量課金プランでないと使用できませんが無料枠が大き いので気軽に試せます!)
  6. 通知設定画面を用意 Firestore のドキュメントにこんなデータ を保存します token は FCM の Client SDK

    で取得で きるトークンで、Functions で使います (通知送信先デバイスの識別子です)
  7. 通知設定を FCM に反映 通知設定を保存した Firestore ドキュメントの更新イベント(onCreate, onUpdate)で Functions をトリガーします Functions

    では FCM の Admin SDK によってトークンとトピック(記事カ テゴリー)の紐付けを行います
  8. Webhook を受け取ってプッシュ通知を送信する 同じく Functions で https リクエストを受け付ける関数を用意します。 microCMS の記事作成時に送信される Webhook

    を受け取るための関 数です。 Webhook のリクエストボディに含まれる記事データからカテゴリーを確 認して通知送信を行います。
  9. microCMS で Webhook の設定をする microCMS 管理画面の {コンテンツ} > API 設定

    > Webhook で、コンテンツ編集時の Webhook を設定できます。 Functions で作成した https 関数の URL を指定し、コンテンツ公開時 に送信されるような設定にしておきます。
  10. まとめ microCMS と Firebase Cloud Messaging を組み合わせてプッシュ通 知を送信するサイトの実装方法を紹介しました。 - サイト上で購読設定を

    Firestore に保存して、 Functions でトピック 購読設定 - microCMS から Webhook を Functions に送信 - Functions で記事カテゴリーをトピックとして通知送信