一部RailsやiOSだったり構成がピッタリとハマった記事がないので書きました。需要がないのかもしれませんが備忘録です。
プロジェクト設定でやること（その1）
プロジェクト設定のCloudMessagingタブ＞ウェブプッシュ証明書＞鍵ペア
この鍵ペアをメモっておく。
プロジェクト設定でやること（その2）
firebaseConfigの内容をメモっておく。
FirebaseConfig.jsx
まずメッセージングの基本だけ書く。
export const messaging = getMessaging(app);これ一行だけ。
何かのビューで（例えばHelp.jsx）
async function requestPermission() {
const permission = await Notification.requestPermission();
if (permission === "granted") {
const token = await getToken(messaging, {
vapidKey:
"BE6g7aKCnwtMTST8zNGu5DJX_fZboCTro",
});
console.log("Token generated : ", token);
} else if (permission === "denied") {
alert("You denied for the notification");
}
}
onMessage(messaging, (payload) => {
console.log(payload.notification);
});
useEffect(() => {
requestPermission();
}, []);vapidKeyに入れてるのが（その1）のあなたのプロジェクトの鍵ペアです。あとはコピペでOK。
firebase-messaging-sw.js
ここでサービスワーカーのJSをおきます。場所はサーバルート。ディレクトリなしのドメイン直下が肝。
importScripts(
"https://www.gstatic.com/firebasejs/9.8.0/firebase-app-compat.js"
);
importScripts(
"https://www.gstatic.com/firebasejs/9.8.0/firebase-messaging-compat.js"
);
const app = firebase.initializeApp({
apiKey: "AIzaSyAXn0iee0",
authDomain: "aaaaaaaaaa",
projectId: "aaaaaaaaaa",
storageBucket: "aaaaaaaaaa.appspot.com",
messagingSenderId: "1777",
appId: "1:1777:web:0ad2131e4",
});
firebase.messaging(app);
firebase.initializeAppの引数の中身は（その2）をズバリそのままコピペでOK。
フォーグラウンド受信はこれだけです。
バックグラウンド受信対応
messaging.onBackgroundMessage((payload) => {
console.log(
"[firebase-messaging-sw.js] Received background message ",
payload
);
// Customize notification here
const notificationTitle = "Background Message Title";
const notificationOptions = {
body: "Background Message body.",
icon: "/firebase-logo.png",
};
self.registration.showNotification(notificationTitle, notificationOptions);
});
ブラウザを格納してテストするとBG出ます。
単純に他のアプリの後ろウインドウではFG扱い。BGは動作せず。
コンソールのMessagingでテストする
まずHelp.jsxをブラウザで開くと、ブラウザのコンソールにLogでTokenが出るので、これをメモ。
送信側は以下、FIREBASEのコンソールページ。
左ペインの実行タブの中にMessagingというのがあり、そこからテスト送信ができる。トークンが重要！！これは（その1）の鍵ペアではない！さっきのブラウザコンソールのトークンを書くのです。
で「テスト」ボタンを押すとコンマ数秒してログにtitleとbodyが出る。これが通知の流れ。
ここを読むべき！最重要！通知が出ない理由
ブラウザの設定を必死にいじってました。時間の無駄でした。OS側でブラウザの通知をOFFにしていると頑張っても出ません。
