FirebaseのWeb Push通知機能をテスト実装する方法を解説

Web PushはPCブラウザを通して、WEBサイトの新着情報などを素早くユーザーに通知できる大変便利な機能です。

Firebaseの管理画面から通知を許可ユーザー（アプリページを訪問したユーザー）に一斉にメッセージを送る事ができます。

テストメッセージの際はトークン情報の登録が必要になりますので、トークンを生成するWeb Pushサンプルアプリを実装していきます。

FirebaseのWeb Push機能をテスト実装する

本記事では、Firebaseの様々な機能の一つである「Web Push」機能をテスト実装する方法についてご紹介します。

プッシュ通知はよくスマホアプリで使われる機能ですが、Web PushはそのWEBブラウザ版の機能にあたりますね。

Google Chromeなどのブラウザを通して、WEBサイトの訪問ユーザーに一斉に通知を届ける事ができます。

Web Pushの大まかな仕組み

Web Pushを導入したWEBページをまずは作成します。

初めてそのページを開いたユーザーに、Web Pushの通信を許可するかどうかのガイダンスが表示されます。

それに許可したユーザーの情報が、Firebase側に登録されます。

あとはFirebaseの管理画面から、その登録ユーザーに対し一斉にメッセージ通知を送る事ができる訳です。

RSSフィードより手軽

WEBサイトの新着情報を更新した際にWeb Push通知を送れば、すべての許可ユーザーに知らせる事ができます。

以前からあるRSSフィードと似ていますが、専用ソフトなどでRSSを読み込む必要がなくダイレクトに通知を送る事ができます。

サンプル実装できれば実用できる

このサンプルでWeb Pushを送るWEBページサンプルができれば、あとはそれを実際のWEBサイトに組み込むだけです。

送信先ユーザーを分類するにはカスタマイズが必要になりますが、予約送信などもできますしまずは充分なのではないでしょうか。

本記事ではまず、Web Pushのサンプルを実装する方法についてご紹介します。

Firebaseのインストールは済ませている事が前提です。

プロジェクトの作成・設定

まずはFirebaseでWeb Push向けのプロジェクトを作成しましょう。

プロジェクトの作成

今回は「lpeg-web-push」としています。

プロジェクトの作成方法について不明な人は、以下の記事を参照下さい。

プロジェクトを作成すると、上記の様にプロジェクト名が表示されますのでそれをクリックしましょう。

※見当たらない場合は、FirebaseのTOPページに戻れば出てきます。

最初は以下の様なアプリを追加するボタンが表示されますので、真ん中のタグマークをクリックします。

ウェブアプリの追加

「ウェブアプリにFirebaseを追加」の画面が表示されますので、アプリのニックネーム名称を登録しましょう。

上記ではプロジェクトと同名の「lpeg-web-push」としていますが、自由です。

下のチェックマークは付けないまま、「アプリの登録」ボタンをクリックします。

Firebase SDKの追加

次に「Firebase SDKの追加」の画面になります。

ここは「npmを使用する」にチェックがついたままでOKですので、そのまま下にある「コンソールに進む」ボタンをクリックしましょう。

上記の様な画面が出てきます。

これでlpeg-web-pushのプロジェクト内に、ウェブアプリを登録した事になります。

ウェブアプリの設定

登録したウェブアプリの設定内容を確認しておきます。

左上の「プロジェクトの概要」メニューの歯車をクリックし、「プロジェクトの設定」をクリックしましょう。

いくつか横並びのメニューが表示されていますが、今回主に見るのは以下の2つです。

全般

まず「全般」のページにはプロジェクトの設定名の表示があります。

下のマイアプリの欄には、先程設定したニックネームが表示されていますね。

さらに下には、先程のFirebase SDKのコード（npm版）が表示されているはずです。

全般ページの下の表記部分

他にもCDNやConfigのバージョンも並んでいますね。

このページに記載してあるコードは後ほどコピペしますので、後で表示します。

Cloud Messaging

次に「Cloud Messaging」のページです。ここで一つ設定が必要です。

下の方に「ウェブ設定」の欄がありますので、青い「Generate key pair」ボタンを押しましょう。

そうすると「ウェブプッシュ証明書」が発行され、鍵ペアとして新しくコードが生成されます。

この鍵ペアも、後ほどコピペしてきます。

アプリファイルの作成

ではローカルPC上で、Web Push用のアプリを構築していきましょう。

まずは任意のフォルダを一つ作ります（フォルダ名は、lpeg-web-pushとしています）。

その中に公開用として「publicフォルダ」を作っておきましょう。

準備するファイル

publicフォルダ内に任意に準備するファイルは、以下の3つです。

それぞれの拡張子は間違えない様にしましょう。

手持ちファイルをコピーして中身を空にし、名前を上記の様に変更する形でOKです。

それ以外のファイルは、プロジェクトの初期化の際に自動で生成されます。

それでは一つずつ中のコードを紹介しましょう。

index.htmlファイル

上記リンクを押すとコードが表示されます。

基本的には丸ごと貼り付けて、上記の状態にして下さい。

コードの中でいくつか注意点をご紹介します。

manifest.jsonファイルのパス

<link rel="manifest" href="/manifest.json">

ヘッダー部に上記の記載があります。

manifest.jsonファイルを読み込む部分ですので、パスが合っているかどうか確認しましょう。

vapidKey:（102行目付近）への挿入

102行目付近に、messaging.getToken({vapidKey:'○○'}の記述があります。

''内には、先程Firebaseの管理画面で生成した「鍵ペア」コードが入ります。

ウェブプッシュ証明書の鍵ペアをコピペ

Firebaseの「プロジェクトの設定」内「Cloud Messaging」ページを開きましょう。

下にある鍵ペアのコードをコピペして、先程の位置に貼り付けます。

firebase-messaging-sw.jsファイル

次にfirebase-messaging-sw.jsです（この名前は固定です）。

まずは上記のコードを丸ごとコピペして入れて下さい。

その上で編集が必要な部分は以下の中です。

firebase.initializeApp({ apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" });

全般ページのSDK内情報をコピペ

ここはFirebaseのプロジェクト設定、全般のページ「SDK」の欄に記載があります。

それぞれ間違えないように、一つずつコピペしてきましょう。

manifest.jsonファイル

このファイルの中身は以下の情報で固定となります。

{ "gcm_sender_id": "103953800507" }

コードは上だけしかありませんので、丸ごと貼り付けて下さい。

記載されている数値は「固定」ですので、このまま入れましょう。

上記3つのファイルを準備したら、サンプルアプリ作成は終了です。

次は作ったサンプルアプリと、Firebaseのプロジェクトをつなげます。

プロジェクトを初期化

ではコマンドライン（Winならコマンドプロンプト）でFirebaseを操作します。

まずはcdで、lpeg-web-pushのディレクトリへ移動しましょう。

cd C:\Users\info\OneDrive\デスクトップ\lpeg-web-push

プロジェクトの初期化

次にFirebaseのプロジェクトを初期化します。

firebase init

Are you ready to proceed? に対しては、「Yes」と入力してEnterします。

サービスの選択

いくつかあるサービス名の中から以下を選択します。

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

矢印キーで上記サービスにあわせて、spaceを押してEnterを押しましょう。

次に「Please select an option:」と出ます。

Use an existing project

上記にあわせて、Enterします。

プロジェクトの選択

プロジェクト名が複数ある場合は、1つ選択する必要があります。

先程Firebaseで作ったプロジェクトID名（lpeg-web-push）を矢印で選択してEnterします。

オプション選択

次の3つは以下の様に選択します。

? What do you want to use as your public directory? public のままEnter ? Configure as a single-page app (rewrite all urls to /index.html)? 「No」を入れてEnter ? Set up automatic builds and deploys with GitHub? 「No」を入れてEnter

indexファイルは上書きしない

さらに今回は、前もってindexファイルを作っています。

index.htmlファイルを上書きするかどうかを確認されますので、Noと入力しましょう。

? File public/index.html already exists. Overwrite? 「No」を入れてEnter

これで初期化が完了しました。

ローカルホストで確認

ではローカルPCのホストでこのアプリを確認してみます。

ローカル上で実行

あらためてコマンドライン上から、cdで今回のファイルディレクトリ（lpeg-web-push）へ移動します。

続けて以下の命令を実行しましょう。

firebase serve

http://localhost:5000 が出力されます。

このページをブラウザで開いてみましょう。

初めて開く場合

初めてこのページを開いた際、上記の様に「通知を許可する」のガイダンスが表示される場合があります。

その場合はこれに「許可」をしておきましょう。

トークン表示されたWEBページ

しばらくすると、トークンの表示されたWEBページが表示されるはずです。

黄色いボタンの「DELETE TOKEN」を押すとトークンが削除され、新しいトークン情報が表示される様になっています。

これでローカルサーバー上にWeb Pushを許可するアカウントが一つ誕生した事になります。

表示されたトークン情報をFirebase側に入れる事で、FirebaseからPush通知を送る事ができるようになる訳です。

テストメッセージの送信

ではきちんと通知が来るかどうか、Firebase側からテストメッセージを送信してみましょう。

Messagingの設定

Firebase Consoleを開きます。

左のメニュー欄「エンゲージメント」から「Messaging」を選びます。

キャンペーン作成

画面が切り替わりますので、上部の「最初のキャンペーンを作成」ボタンをクリックしましょう。

「Firebase Notification メッセージ」側にチェックをつけて「作成」をクリックします。

メッセージ作成画面

表示された画面からメッセージの作成をしていきます。

上記の4つを設定する事ができます。

テスト送信は最低でもタイトルと本文があればできます。

必要事項を入れたら、右の「テストメッセージの送信」を押します。

アイコン画像

画像を表示するためには、imagesフォルダなどを準備して設置しておき、アプリをFirebase Hostingでデプロイする必要があります。

ホストした際にできるURL上の画像パスを入れれば、表示できるようになる訳です。

送信先トークン情報の指定

「テストメッセージを送信」ボタンを押すと、トークンを指定する画面が表示されます。

ここで、先程ローカルホストで開いたページに生成されたトークン情報をコピーしてきましょう。

それを入力欄に貼り付けて、右端のプラスマークを押して登録します。

トークン情報が下に移動して、左にチェックがついているのがわかると思います。

確認したら「テスト」ボタンを押しましょう。

実際の通知

するとブラウザの右下に以下の様な通知が来ます。

無事届けばテストメッセージ送信は完了です。このメッセージはブラウザをアクティブにしていてもしていなくても通知されるはずです。

今回はテスト送信のためトークン情報が必要だった。

今回はテストのため、送信先となるトークン情報を指定する必要がある訳ですね。

本番でこのWeb Pushアプリを使う場合、アプリをデプロイしてFirebase上にアップします。

アプリを開いたユーザーの情報はFirebase側に自動登録されるので、先程の様にトークン情報を入れたりする必要はありません。

以下の記事を参考にしました

紹介したコードは、主にQiita.com様の記事コードを参考にしております。

人気記事

Firebase関連記事