Zenn
😎

Webプッシュ通知についてよくわかっていなかったので調べてみた

2023/12/11に公開
webプッシュ通知
tech

最近ではiOSにも実装されるようになった。ウェブ プッシュ通知ですが、 恥ずかしながら私はWebプッシュ通知についてあまりよく理解していませんでした。

今回自分で作っているアプリに実装することにしたので、 備忘録がてら調べた内容をまとめていこうと思います。

誤った表現もあるかもしれませんが、わかりやすさ重視で解説していきたいと思います。

Webプッシュ通知の基本的な4要素

まず前提として、Webプッシュ通知の仕組みを理解するためには、以下の主要な4要素を捉えておくとわかりやすいかと思います。

1. ユーザーのデバイス（クライアント）

ユーザーがWebブラウザを使用しているデバイスです。要はiOSやアンドロイド、PCなどですね。プッシュ通知は、ユーザーがアプリやウェブサイトをアクティブに使用していない時でもデバイスに届きます。

2. サービスワーカー（Service Worker）

サービスワーカーは、Webアプリのバックグラウンドで動作するスクリプトで、プッシュ通知を受け取り、表示する役割を担います。これはブラウザにインストールされ、Webページが閉じられていても動作を継続できます。

ここでサービスワーカーはとても重要な要素でして、Webプッシュ通知のキーポイントとなります。サービスワーカーはバックグラウンドで動作するため、Webページがアクティブでない状態でも活動を続けます。

それゆえ、プッシュ通知のようなリアルタイムな通信を受け取ることができます。

3. プッシュサービス（Push Service）

ブラウザベンダーが提供するサービスで、プッシュ通知をデバイスに配信する役割を担います。例えば、GoogleのFirebase Cloud Messaging（FCM）はChromeのプッシュサービスとして機能します。

4. アプリケーションサーバー（Application Server）

通知を発行するサーバーです。通知の内容やタイミングを決定し、プッシュサービスに通知を送信するリクエストを行います。

プッシュサービスとアプリケーション・サーバーを担うFCM

Firebase Cloud Messaging (FCM) は、前述のアプリケーションサーバーとプッシュサービスの両方の役割を担っています。具体的には以下のな役割を担っています。

  1. アプリケーションサーバーとしての機能
    • FCMは、アプリケーションサーバーからの通知リクエストを受け取ります。この場合、アプリケーションサーバー（例えば、あなたのバックエンドサーバー）はFCMにプッシュ通知のデータ（タイトル、メッセージ、その他のデータ）を送信します。
    • アプリケーションサーバーは、FCMを通じて特定のユーザー、ユーザーグループ、またはすべてのユーザーに対してプッシュ通知を送るためのリクエストを生成します。
  2. プッシュサービスとしての機能
    • FCMは、Googleのプッシュ通知サービスとして機能し、これらの通知を適切なデバイス（Android、iOS、Web）に配信します。
    • 各デバイスやブラウザは、FCMからの通知を受け取るために必要なサブスクリプション情報（例えば、登録トークン）を持っています。
    • FCMは、このサブスクリプション情報に基づいて、適切なデバイスに通知を送信します。

プッシュ通知の流れ

Firebase Cloud Messaging (FCM) を使用したWebプッシュ通知の大まかな流れを、前述した4要素を織り交ぜながら説明します。

1. ユーザーのデバイスでのプッシュ通知の購読

  • ユーザーのデバイス（クライアント）でWebアプリを開きます。
  • ユーザーは、プッシュ通知を受け取ることに同意します（通常、ブラウザのポップアップを通じて）。
  • プッシュ通知を購読するため、サービスワーカーが登録されます。

2. サービスワーカーの設定

  • ブラウザアプリにサービスワーカーが導入され、バックグラウンドで動作します。
  • サービスワーカーは、プッシュ通知を購読し、配信された通知をユーザーのデバイスに表示する役割を持ちます。

3. プッシュサービスへの登録

  • ユーザーが通知を購読すると、そのデバイスは特定のプッシュサービス（この場合はFCM）に対して一意のサブスクリプション（登録トークンやエンドポイント情報）を取得します。

4. アプリケーションサーバーへの登録情報の送信

  • このサブスクリプション情報は、Webアプリのアプリケーションサーバー（この場合もFCM）に送信され、将来の通知の送信先として保存されます。

5. FCMを通じた通知の配信

  • アプリケーションサーバーから受け取った通知を適切なサブスクリプション（ユーザーのデバイス）に対して配信します。
  • FCMを使っている場合は、これらをすべてFCMが担ってくれます。

6. サービスワーカーによる通知の受信と表示

  • ユーザーのデバイス上で動作しているサービスワーカーは、FCMから送信された通知を受け取ります。
  • サービスワーカーは、通知をユーザーのデバイス上で表示します（ブラウザの通知として）。

まとめ

Webプッシュ通知についてまとめますと、

  • Webプッシュ通知には4つの大きな要素がある
  • その中でもプッシュサービスとアプリケーション・サーバーをFCMというサービスが担ってくれる

という感じです。

そして全体の流れとしては、

  • ユーザーのデバイス(クライアント)でWebプッシュ通知の許可をする
  • ブラウザアプリのサービスワーカーに登録される
  • FCMでプッシュ通知の処理が行われて、ブラウザアプリにプッシュ通知が送られる
  • 送られた情報をクライアントに表示させることで、ユーザーが認知する

となります。

なおFCMを使わない場合は、プッシュサービスとアプリケーション・サーバーを自前で用意する必要が出てきます。

これらを準備するにはそれなりの知識と実装難易度が求められるため、サクッと作りたいのであればFCMを使うほうが楽かもしれません。

Discussion