基于Firebase与Next.js的聊天Web应用后台推送通知实现咨询

一、是否需要 Service Worker？ #

是，必须用。浏览器后台/标签页关闭时，主线程会被挂起，只有 Service Worker（独立于页面的后台脚本）能持续监听 Firebase Cloud Messaging（FCM）的推送事件，触发系统通知。FCM 的 Web 端实现本身就依赖 Service Worker 处理push和notificationclick事件。

二、Next.js 中配置 Service Worker 步骤 #

1. 安装依赖 #

用next-pwa简化 Next.js 对 PWA/Service Worker 的配置：

npm install next-pwa

2. 修改next.config.js #

启用 PWA 并指定 Service Worker 相关配置：

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  // 开发环境可开启方便测试，上线前关闭
  disable: process.env.NODE_ENV === 'development' ? false : false,
});

module.exports = withPWA({
  // 你的原有 Next.js 配置
});

3. 创建 FCM Service Worker 文件 #

在public目录下新建firebase-messaging-sw.js（FCM 默认识别这个文件名，自定义需在初始化时指定）：

importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');

// 初始化 Firebase（替换成你的项目配置）
firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
});

const messaging = firebase.messaging();

// 监听后台推送事件
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icons/icon-192x192.png' // 替换成你的通知图标路径
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

// 监听通知点击事件，跳转对应聊天页
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(`/chat/${payload.data.chatId}`)
  );
});

4. 前端初始化 FCM #

在_app.js或专门的初始化组件中处理权限和令牌：

import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { app } from '../firebase/config';
import { db } from '../firebase/config'; // 假设已初始化 Firestore

const messaging = getMessaging(app);

// 请求通知权限并存储 FCM 令牌到 Firestore
async function setupFCM() {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    const token = await getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' });
    // 将令牌关联到当前用户，方便后续发送推送
    await db.collection('users').doc(currentUser.uid).update({ fcmToken: token });
  }
}

// 前台消息监听（可选，前台时也显示通知）
onMessage(messaging, (payload) => {
  new Notification(payload.notification.title, {
    body: payload.notification.body
  });
});

// 组件挂载时执行
useEffect(() => {
  setupFCM();
}, [currentUser]);

三、React Context 中的认证令牌能否在 Service Worker 中使用？ #

不行。Service Worker 运行在独立于页面的上下文，无法直接访问 React Context、Redux Store 等页面状态。

解决方案 #

1. 推送 payload 直接携带必要信息：在发送推送时（比如通过 Cloud Functions），把聊天 ID、消息内容等直接打包到 payload，不需要在 Service Worker 中请求 Firestore。
2. 存储令牌到 IndexedDB：将用户 UID 和认证令牌存入 IndexedDB，Service Worker 可访问 IndexedDB 获取令牌，再初始化 Firebase Auth 进行数据操作。
3. 通过客户端通信获取：Service Worker 可通过self.clients.matchAll()获取活跃页面客户端，发送消息请求令牌，但页面完全关闭时不可用。

四、Firestore 消息数组的推送触发逻辑 #

要在新增消息时自动触发推送，需用 Firebase Cloud Functions 监听 Firestore 文档更新：

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.sendChatNotification = functions.firestore
  .document('chats/{chatId}')
  .onUpdate(async (change, context) => {
    const newChatData = change.after.data();
    const oldChatData = change.before.data();

    // 检查是否有新消息添加
    if (newChatData.messages.length > oldChatData.messages.length) {
      const newMessage = newChatData.messages.at(-1);
      const chatId = context.params.chatId;
      // 假设聊天文档的 participants 字段存储双方用户 UID
      const receiverId = newChatData.participants.find(id => id !== newMessage.senderId);

      // 获取接收者的 FCM 令牌
      const userDoc = await admin.firestore().collection('users').doc(receiverId).get();
      const fcmToken = userDoc.data()?.fcmToken;

      if (fcmToken) {
        const payload = {
          notification: {
            title: `新消息来自${newMessage.senderName}`,
            body: newMessage.content,
          },
          data: { chatId }
        };

        // 发送推送
        await admin.messaging().sendToDevice(fcmToken, payload);
      }
    }
  });

内容的提问来源于stack exchange，提问作者kamal