FirebaseコンソールからWebプッシュ通知を配信する（機能紹介編）

すっかり寒くなりましたね⛄
当方、現役のWebアプリケーションエンジニアですが、テック系記事を書くのは10か月ぶりです。
2025年はさすがにもっと投稿したい...。

対象読者

• Webプッシュ通知に興味を持っているすべての方
• Firebase Cloud Messaging(FCM)の導入を検討されているすべての方
• エンジニアでない方も大歓迎🤗

概要

この記事ではFirebaseコンソールからWebプッシュ通知を配信する様子を、デモンストレーションしていきます。

Googleが提供するFirebase Cloud Messaging(FCM)は、デバイス間でメッセージや通知を送受信するためのサービスです。iOS, Androidアプリ開発においてもよく使われてますし、もちろんWebプッシュ通知の配信もできちゃいます✌

Firebaseの「新しいキャンペーン」から送信したい内容を入力して、「送信」ボタンを押すことで、PWA（プログレッシブウェブアプリケーション）に、Webプッシュ通知が届く様子をご紹介します。



エンジニア向けに、Firebaseの設定と実装方法を記した記事は、別途用意する予定です。

厳密にはこの「新しいキャンペーン」画面は、Firebaseコンソールの"Notifications Composer"という名前なんですが、この記事では便宜上「Firebaseコンソール」と呼ばせてください。
（参照: Firebase コンソールでメッセージを送信する | Firebase Cloud Messaging ,
Where is Notification composer in Firebase Console? - Stack Overflow ）

Firebaseコンソールに通知内容を入力

Firebaseの“Messaging”から「新しいキャンペーンを作成」を選択します。

「通知の作成」画面が表示されるので、まずは通知内容を入力していきます。

「タイトル」「画像のURL」「テキスト」を指定できます。
画像そのものを添付することはできないので、どこかのサーバーにあげておく必要があります。(Gyazoとか)

プレビューもこの画面で確認できますが、（とくに画像に関して）実機での表示と異なるので、注意が必要です。


これで通知内容の入力は完了したので「次へ」を押します。

配信対象のアプリケーションを選択します。
アプリケーションの作成方法や設定は別の記事で説明する予定です。



配信スケジュールを設定します。
最後の「公開」ボタンを押したらすぐに配信したい場合は「現在」を、

特定の日時を予約しておきたい場合は「設定済み」から、希望の日時を入力します。


なんだか日本語に違和感があります、Google翻訳さんの仕業でしょうか。
あと一息がんばってほしいところです。

キーイベントはマーケターさんから指示があれば入れましょう。
アナリティクス（プッシュ通知の詳細な解析）に役立つ設定なんだと思います。（専門外）

その他のオプションですが、なにも入れなくても配信自体は可能です。

専用の実装が必要になりますが、カスタムデータをメッセージとともに送信できます。

trogでは、この設定で決めた場所の記事に、プッシュ通知から直接アクセスできるようにしています。
つまり通知をクリックすると、アプリ内のその記事が開く、ということです。

これでFirebase コンソールから入力はすべて完了です。
「確認」を押すと、入力内容について問題なさそうか、確認ダイアログが表示されます。

よければ「公開」を押します。

端末に通知が届く

あらかじめPWA（プログレッシブウェブアプリケーション）をインストールしておいた端末に、プッシュ通知が届きます。

わたしのiPhoneにPWA版trogをインストールしておきました。
iPhoneの通知画面を確認すると...

さきほど入力した通知が配信されています！

iPhoneではPWAアイコンが表示されます。（どうもAppleさんの都合なのか、指定方法が異なるのか、画像が表示されない模様。）

PCではさきほどURLを入力した画像が、通知に表示されます。
正方形の画像だと下半分が切れてしまいました。
通常、通知配信時は16:9の画像を使っているのですが、それだとちゃんと表示できています。

Android OSでの表示は、後日ブラックフライデーセールで購入したAndroidを使って検証します🧪


今回はプッシュ通知を許可しているすべての端末に対して、この通知が届きました。

2のターゲットから、「アプリ」ではなく、「トピック」を指定することで、そのトピックを購読している端末のみに通知を送信することも可能です。
ただしそのための特別な実装と、Firebase の設定が必要になるので注意してください。

Firebase コンソールで過去の通知を確認

Firebase Cloud MessagingでのWebプッシュ通知配信方法としては他にも、Admin SDK(ライブラリ Webアプリに実装、アプリの中から通知を送る)やv1 HTTP プロトコル(cURLコマンドやPOSTMAN経由でAPI実行)が用意されています。
細かい設定が可能なメッセージの送信方法ですが、これらはFirebaseコンソール経由の実装とはまた別に、込み入った実装が必要になります。


今回紹介したFirebaseコンソールの最大の魅力は、過去に配信したプッシュ通知の内容を振り返って確認できること、そしてどのくらいのユーザーにプッシュ通知を送信したか、モダンなUIから確認できる部分にあると考えています。

さきほど紹介したAdmin SDKやv1 HTTP プロトコル(API)で記録を残そうとすると、標準的な実装では厳しいです。
特別にログファイルに出力する実装を入れておくとか、送信結果（レスポンス）を毎回保存しておく運用にするなど、ひと手間かかります。
（もし良い方法があれば、お問い合わせフォームから教えてください！）


Firebaseコンソール経由で配信した通知は、このように表示されます。

画像は、お恥ずかしながら、trogの記事更新メッセージとして実際に配信したものです。
結果として通知の送信数が確認できます。

「開いた数」も確認できそうですが、実装側の問題なのかうまく計測できてないですね。
（この頃はまだ一部の実装で古いライブラリを使ってました。）
決して、誰も開いてないわけではないです😭
少なくともこの18の送信数のうち数台はわたしのテスト端末で、わたしが開いてますので。

「複製」を押すと、この通知の入力内容を引き継いで、新しいキャンペーンの作成画面に行けます。
前の通知と統一した文章で配信できるので、Firebaseコンソールはかなり便利に利用しています✨


注意点としては、過去にAdmin SDKやv1 HTTP プロトコル(API)経由で送信したWebプッシュ通知は、Firebaseコンソールからの確認・複製はできません。
当然と言えばそうなのですが、Firebaseコンソールを経由して送信した通知の記録のみを表示するページになっています。

おわりに

Admin SDKは通知テキストが固定のもの、決まりきっているものに向いているので、都度発生する「記事更新のお知らせ」のような通知には、単体では不向きです。（ただし各種CMSと連携のうえ自動プッシュ通知配信が技術的には可能なので、異論は認めます。）
FCMを利用したWebプッシュ通知送信方法としては、v1 HTTP プロトコル(API)が主流で、多くの記事でAPI経由の実装方法が紹介されていますが、エンジニアによる配信が前提になるかと思います。

trogではここ１年ほど、Firebaseコンソールを利用してWebプッシュ通知を配信してきました。
FirebaseコンソールのUIであればエンジニア以外の方にも、通知を配信していただけないかなー、と淡い期待を抱いています。...しかしながら、現場レベルでは厳しいというご意見もいただきました。世知辛いぜ。

次回は具体的な実装方法の説明記事を投稿する予定です。
FirebaseコンソールからのWebプッシュ通知送信も、選択肢のひとつに入れてもらえるとうれしいです。



* * *



（おまけ）trogのWebプッシュ通知登録してくれてる人、ありがとうございます！！！

記事中の通知画像はステージング環境（本番環境とは別）のもので、「テストメッセージを送信」という、指定した端末のみに配信する機能を使用しています。（本番の通知が飛ばないよう、気を付けています。）
皆さまのおかげで、この記事を書くモチベが生まれています🙏

みんなもクリエイターへの前向きなリアクション、大事にしような！