Firebase Cloud Messagingを利用【プッシュ通知】

概要

ここ 2 年の間に書き方が少し変わっているようなので、その備忘録。

ここでいう、「プッシュ通知」はリモートプッシュ通知を指します。広義では「お知らせを表示する」くらいの温度感ですが、ここでは別のマシンからのメッセージを受け取り、それを表示するといったくらいに思ってください。

初期化

Firebase の「プロジェクトの設定」->「全般」の下の方に「アプリの追加」があるので、追加する。

// firebase.js
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";
const config = {
  apiKey: "",
  projectId: "",
  authDomain: [""],
  messagingSenderId: "",
  appId: "",
};
let app = initializeApp(config);

const messaging = getMessaging(app);
const vapidKey = {
  vapidKey: "",
};
export { app, messaging, vapidKey };

トークンの発行

以下はデバイストークンの発行です。Notification.requestPermission()で通知の許可状態を見て、getToken でデバイストークンを発行します。「messaging」と「vapidKey」は上記で定義しているものを使用しています。自分の場合は、上記の初期化は「firebase.js」にて行い、それを呼び出す形で使用しています。

import { getToken } from "firebase/messaging";
Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    getToken(messaging, vapidKey)
      .then(async (currentToken) => {
        console.log(currentToken); // currentTokenがデバイスのトークンとなり、これは適宜データベースに保存して使用する。
      })
      .catch((e) => {
        console.log(e);
      });
  }
});

プッシュ通知設定

以下の内容を「firebase-messaging-sw.js」という名前で index.html と同じところに保存してください。自分は「vue/cli」を使用しているので、「public」に保存しています。

importScripts("https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.3.0/firebase-messaging.js");

firebase.initializeApp({
  messagingSenderId: "",
});

// Retrieve an instance of Firebase Messaging so that it can handle background messages.
const messaging = firebase.messaging();

// 通知を受けとると push イベントが呼び出される。
self.addEventListener(
  "push",
  function (event) {
    let message = event.data.json();
    console.log("event:push", message);
    let messageTitle = message.notification.title;
    let messageBody = message.notification.body;
    let tag = "cuppa";

    const notificationPromise = self.registration.showNotification(
      messageTitle,
      {
        icon: "/img/icons/favicon-32x32.png",
        body: messageBody,
        tag: tag,
      }
    );

    event.waitUntil(notificationPromise);
  },
  false
);

// WEBアプリがバックグラウンドの場合にはsetBackGroundMessageHandlerが呼び出される。
messaging.setBackgroundMessageHandler(function (payload) {
  console.log("backgroundMessage");

  return self.registration.showNotification(payload.title, {
    body: payload.body,
  });
});

プッシュ通知テスト

ここでは VScode の REST Client でのテストを示しています。
「server_key」は「トークンの発行」にある画像のサーバーキー、「currentToken」は上記で発行したものです。

POST https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=<server_key>

{
    "to": "<currentToken>",
    "notification": {
        "title": "FCM Message",
        "body": "This is an FCM Message"
        }
}