【PWA】Firebaseを利用してプッシュ通知の配信基盤を作成してみた！｜Labo｜株式会社トライム

PWAを導入したWebサイトでは、ネイティブアプリのようにプッシュ通知を受信させることが可能になります。
この記事では、Firebaseというツールと連携し、プッシュ通知の配信基盤を構築した経緯を報告したいと思います。

より詳しい実装の詳細はこちら

PWAとは？

PWAとは、Webアプリとネイティブアプリ両方の特徴を持っているアプリケーションのことを指します。PWAを導入することにより、Webサイトへ、スマートフォンなどの端末のホーム画面へアイコンを追加する、キャッシュのコントロールによりオフライン環境での閲覧を実現する、などの機能を持たせることができるようになります。

参照：実際どうなのか？いまさら聞けないPWAについて

この記事ではPWAを導入することによって実装することができる「プッシュ通知」機能について、実際に配信可能な形にするまでの詳細を報告します。

プッシュ通知配信基盤 -利用したサービスについて-

プッシュ通知の配信基盤を構築するにあたり、Firebaseというサービスを活用しました。
Firebaseは、Googleが運営しているMBaaS（エムバース）サービスであり、リアルタイム同期などの豊富な機能を持っています。アプリ開発などで、サーバサイドの開発費や工数を抑えられるのに用いられることが多いサービスです。

※MBaaS（エムバース）サービスについて
MBaaSは、Mobile Backend as a Serviceの略で、スマートフォン向けのWebアプリケーションが必要とするサーバー側の様々な機能をインターネットを通じてサービスとして提供するクラウドサービスの一種。

参考：IT用語辞典 e-Words

Firebaseは様々な機能を持っていますが、今回のプッシュ通知基盤開発では以下の3つの機能を使用します。

• Firebase Cloud Messaging(FCM)
• Cloud Functions
• Cloud Firestore

Firebase Cloud Messaging(FCM)

Firebase Cloud Messagingでは、様々プラットフォーム上のアプリケーションに対してメッセージを送信することが可能になります。また、ターゲットを絞ってメッセージを送ることも可能です。

Cloud Functions

Firebaseの他機能やHTTPSリクエストに応じて、googleクラウドに用意したバックエンドのコードを自動的に実行することが可能です。

Cloud Firestore

モバイル、ウェブ、サーバー開発に対応したオブジェクト型のデータベースです。リアルタイムにアプリ間でデータの同期を行うことができます。

プッシュ通知配信基盤 -仕様について-

それでは、Firebaseを組み込んだプッシュ通知の配信基盤の仕組みの説明をしていきたいと思います。

デバイスのエンゲージメントまでの流れ

まず、ユーザーがPWAにアクセスした際に、プッシュ通知の受け取りの許可の申請モーダルが表示されます。これを許可することで、Firebase Cloud Messagingによりユーザー（端末）毎のトークンが発行され、デバイス情報などと合わせてCloud Firestoreへとデータが格納されます。
ここまでがユーザー（端末）毎のエンゲージメントまでの流れです。

プッシュ通知配信時の流れ

プッシュ通知の配信者側で、Cloud Functionsへと任意のJSON（プッシュ通知の情報）を送信（POSTといいます）することで、Cloud FunctionsとCloud Firestoreの間でユーザー（端末）毎のトークンの確認が行われます。上記により、プッシュ通知の受け取りを許可しているユーザー（端末）の情報を受け取ったCloud Functionsが、改めてFirebase Cloud MessagingへとJSONの内容をPOSTし、実際にユーザー（端末）へとプッシュ通知の配信が行われます。

プッシュ通知配信基盤 -JSONのPOSTの方法について-

今回の実装では、Expressというフロントエンドのフレームワークを利用して、FirebaseへのJSONのPOSTを行いました。

手順は確認用のコードを作成し、Firebaseのコンソール画面のCloud Functionsへと「SendMessage」という関数を表示させるというものです。

上記画面で確認できるトリガーのURLに対して、下記のような内容のJSONの情報をPOSTすることで実際に配信を行うことができました。

{
  "title": "セールタイトル",
  "body": "セール情報です。",
  "link": "https://www.google.co.jp"
}

この部分のコードについて詳しく知りたい方はこちら

プッシュ通知配信基盤 -補足-

ここで使用した手法では、1回の配信で最大1,000台までのデバイスが対象となります。
そのため、より多くのデバイスへと通知を送りたい場合はもう少しプログラムのカスタマイズを行う必要があります。

また、ここまでの内容でjsonのPOSTを行うためには、作業環境を準備する必要があります。実際に案件などでこの仕様を実装する際には、自前でのフォーム画面の構築やheadlessCMSなどの導入を検討することで、よりスムーズな運用フローを実現可能になるでしょう。

プッシュ通知配信基盤作成について -まとめ-

PWAサイトへとプッシュ通知を配信する基盤の作成を行いました。jsonの配信方法については、一斉通知や時間指定など、ある程度のカスタマイズが可能です。
このあたりは実際の要件に合わせたカスタマイズを行うことで効果的な運用ができるでしょう。

また、実際の活用例としては、ECサイトのセール情報を特定のユーザーに対して一斉配信するよう設定する、位置情報を取得して実店舗の近くに来たらオトクな情報の配信を行う、など。
既存のサービスに依存している部分も大きいため制限はありますが、使い方によってはPWAへとより便利な機能の実装が可能になるのではないでしょうか。

最後に、トライムではPWAを始めとした様々なWebサイトの構築を請け負っています。
ぜひお気軽にご相談ください！

お問い合わせはこちらから