接入firebasejs给你的WEB应用 添加后台推送逻辑，让你的WEB拥有APP推送功能
你好，各位读者，我是梦兽，一名热衷于 WEB 全栈开发及 Rust 编程的爱好者。若你也对 Rust 情有独钟，欢迎关注我的公众号 “梦兽编程”，加入我们的技术交流群，一同探讨前沿科技。
如果你喜欢本文的内容，不妨轻轻地点个赞吧！
在很久很久以前梦兽就已经发表过PWA的教程，但是基于Server Worker的Push Manage功能，但还是有一些同学感觉比较难理解。没关系现在你可以接入firebase，这个可以让你轻松实现FCM Push Notification 。
梦兽这里使用 Next.js 的 WEB 应用作为例子。当然你可以使用Spa的Vue，React。只是梦兽不喜欢Spa应用罢了。
前置条件
已经创建了 Firebase 项目并获取了配置密钥和安装了 Firebase SDK。
1. 创建 Service Worker
在项目的 public 文件夹中创建一个名为 firebase-messaging-sw.js 的文件。这个文件用于处理后台通知（应用未激活时的推送）。在 firebase-messaging-sw.js 中配置 Firebase。
这段代码可以在firebase-messaging案例代码中直接获取。
importScripts('https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.8.0/firebase-messaging.js');
const firebaseConfig = {
apiKey: 'your_keys',
authDomain: 'your_keys',
projectId: 'your_keys',
storageBucket: 'your_keys',
messagingSenderId: 'your_keys',
appId: 'your_keys',
measurementId: 'your_keys',
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
icon: './logo.png',
};
// 这是一个调用浏览器系统级别通知的api
self.registration.showNotification(notificationTitle, notificationOptions);
});
2. 配置 Firebase
在项目中创建一个 Firebase 配置文件，比如 utils/firebase/firebase.ts。初始化 Firebase 应用。
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
apiKey: 'your_keys',
authDomain: 'your_keys',
projectId: 'your_keys',
storageBucket: 'your_keys',
messagingSenderId: 'your_keys',
appId: 'your_keys',
measurementId: 'your_keys',
};
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp;
3. 创建自定义 Hook
编写一个自定义 Hook（比如 useFcmToken），用于获取通知权限和 FCM Token。这个 Hook 会向用户请求通知权限，并返回 Token。
import { useEffect, useState } from 'react';
import { getMessaging, getToken } from 'firebase/messaging';
import firebaseApp from '../firebase/firebase';
const useFcmToken = () => {
const [token, setToken] = useState('');
const [notificationPermissionStatus, setNotificationPermissionStatus] = useState('');
useEffect(() => {
const retrieveToken = async () => {
try {
if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
const messaging = getMessaging(firebaseApp);
const permission = await Notification.requestPermission();
setNotificationPermissionStatus(permission);
if (permission === 'granted') {
const currentToken = await getToken(messaging, {
vapidKey: 'your_vapid_key',
});
if (currentToken) {
setToken(currentToken);
}
}
}
} catch (error) {
console.log('获取 Token 时出错:', error);
}
};
retrieveToken();
}, []);
return { fcmToken: token, notificationPermissionStatus };
};
export default useFcmToken;
4. 在页面中使用
在主页面（比如 index.tsx）中使用自定义 Hook。设置监听器，分别处理前台和后台通知。
import React, { useEffect } from 'react';
import { getMessaging, onMessage } from 'firebase/messaging';
import firebaseApp from '../firebase/firebase';
import useFcmToken from '../hooks/useFcmToken';
export default function HomePage() {
const { fcmToken, notificationPermissionStatus } = useFcmToken();
useEffect(() => {
if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
const messaging = getMessaging(firebaseApp);
const unsubscribe = onMessage(messaging, (payload) => {
console.log('收到前台通知:', payload);
// 在这里可以更新 UI 或显示通知
});
return () => {
unsubscribe();
};
}
}, []);
return <div>首页</div>;
}
5. 发送推送通知测试
使用 Postman 或其他工具测试推送通知。使用POST请求方，请求地址为https://fcm.googleapis.com/fcm/send。 请求头：
Content-Type: application/json
Authorization: key=your_server_key
请求体：
{
"to": "receiver_fcmToken",
"notification": {
"title": "通知标题",
"body": "通知内容"
}
}
注意事项
-
- Token 可能会变更：当 Token 发生变化时，需要及时更新，否则推送会失败。
-
- 存储 Token：可以将 Token 存入数据库，以便后续推送使用。
-
- 启用 Firebase Cloud Messaging API：确保在 Firebase 控制台中启用了 Cloud Messaging API（Legacy 模式）。
-
- 区分前台和后台通知：分别处理前台和后台的推送逻辑。
结语
衷心感谢每一位阅读至此的朋友，你们的关注和支持是我持续更新的动力源泉。创建与维护这些资源实属不易，但有了你们的鼓励，我会加倍努力。如需进一步助力我的创作，不妨考虑赞助我，无论是点赞分享，还是关注公众号查看广告，都是对我莫大的帮助。
让我们携手共进，探索编程的无限可能！
