クロスプラットフォーム メッセージング ソリューションのFirebase Cloud Messaging（FCM）を使ってWeb Push通知を試してみました。
Firebaseの準備
以下、Firebase コンソールでの作業になります。新規プロジェクトを作成済みの状態から始めます。
アプリの登録
プロジェクトの管理ページで、 [ウェブ]を選択し、アプリの登録ページを開きます。
ウェブアプリにFirebaseを追加 のページで適当な名前を入力して、[アプリを登録]ボタンを押します。なお今回はFirebase Hostingは設定しませんので、チェックは不要です。
[アプリを登録]ボタンを押すと、スクリプトが表示されます。firebaseのライブラリを使用するために必要なので控えておきます。
鍵の生成と取得
Firebaseコンソールの[設定]から[クラウドメッセージング]を開きます。開いたら、上部のサーバーキーを控えておきます。
次に、ウェブ認証情報を設定します。ウェブ設定の[鍵ペアを作成]ボタンを押して、鍵を生成します。
鍵が生成できたら、こちらも控えておきます。
以上でFirebaseコンソール上での作業は終わりです。
Webアプリの準備
今回はこちらのサンプルを使用します。まずcloneします。
$ git clone https://github.com/firebase/quickstart-js.git使うのはquickstart-js/messagingになりますので、WEBサーバーのドキュメントルートをこのディレクトリに設定しておきます。
そして、apiKey等、アプリの情報を渡すためにmessagingディレクトリ下のindex.html, firebase-messaging-sw.jsを修正します。以下、差分のみを表示します。なおkeyは適当な文字列にしています。
-<script src="/__/firebase/7.15.0/firebase-app.js"></script>
-<script src="/__/firebase/7.15.0/firebase-messaging.js"></script>
-<script src="/__/firebase/init.js"></script>
+
+<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-messaging.js"></script>
<script>
+ firebase.initializeApp({
+ apiKey: "API_KEY",
+ authDomain: "DOMAIN",
+ databaseURL: "DATABASE_URL",
+ projectId: "PROJECT_ID",
+ storageBucket: "BUCKET",
+ messagingSenderId: "SENDER_ID",
+ appId: "APP_ID"
+ });
+
// [START get_messaging_object]
// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();
// [END get_messaging_object]
// [START set_public_vapid_key]
// Add the public key generated from the console here.
- messaging.usePublicVapidKey('<YOUR_PUBLIC_VAPID_KEY_HERE>');
+ messaging.usePublicVapidKey('MY_PUBLIC_KEY');
// [END set_public_vapid_key]-// Import and configure the Firebase SDK
-// These scripts are made available when the app is served or deployed on Firebase Hosting
-// If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup
-importScripts('/__/firebase/7.15.0/firebase-app.js');
-importScripts('/__/firebase/7.15.0/firebase-messaging.js');
-importScripts('/__/firebase/init.js');
+importScripts('https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/7.15.0/firebase-messaging.js');
+
+firebase.initializeApp({
+ apiKey: "API_KEY",
+ authDomain: "DOMAIN",
+ databaseURL: "DATABASE_URL",
+ projectId: "PROJECT_ID",
+ storageBucket: "BUCKET",
+ messagingSenderId: "SENDER_ID",
+ appId: "APP_ID"
+});これでWebアプリの準備完了です。
メッセージ配信してみる
それでは実際にメッセージ配信してみます。まず配信用のトークンを取得するため、Webアプリにアクセスします。対応ブラウザでアクセスすれば、トークンが表示されるので控えておきます。
何も表示されない場合、ブラウザが対応しているか確認してください。なお、iOSで動作するブラウザは非対応です（正確にはPush APIに非対応）。PCとAndroidのChromeでは動いたのに、iPhoneのChromeでは動かなくて少し悩んでしまいました。実際に使用する場合はfirebase.messaging.isSupported()で確認した方が良さそうです。
トークンが取得できたら、メッセージを送信します（詳細はこちら）。__SERVER_KEY__にはサーバーキー、__TOKEN__に控えておいたトークンをいれます。
curl -X POST -H "Authorization: key=__SERVER_KEY__" -H "Content-Type: application/json" -d '{
"notification": {
"title": "新しい記事が投稿されました",
"body": "今すぐアクセス！",
"icon": "firebase-logo.png",
"click_action": "https://tdomy.com"
},
"to": "__TOKEN__"
}' "https://fcm.googleapis.com/fcm/send"そしてこのサンプルでは、メッセージ送信時にウェブアプリがフォアグランドかどうかで結果が異なります。
ウェブアプリがフォアグラウンドの場合
この場合、Received messageとして画面上に表示されます（index.htmlのmessaging.onMessageの部分で処理されます）。
ウェブアプリがバックグラウンドの場合
Push配信といえば、これですね（さらにいえばPWAとしてインストールした状態ですね）。アプリがフォアグランドになくてもService Workerによって処理され、通知が表示されます（firebase-messaging-sw.jsのmessaging.setBackgroundMessageHandlerの部分）。
通知の表現は環境によって変わると思いますが、Windows 10だと下のようになります。
まとめ
ということでFirebase Cloud Messaging（FCM）を使ってWeb Pushを試してみました。うまく使えれば良いユーザー体験につながりそうです。ただ、メールと同じで使いすぎは禁物ですね。あと今回試すまで知らなかったのですが、iOSで使えないのが痛いですね…。ぜひ、対応して頂きたいです。