如何基于HTML、原生JS和Node.js配置Web端Firebase Cloud Messaging(FCM)

客户端配置（HTML + 原生JS） #

1. 获取Firebase配置 #

• 登录Firebase控制台，进入目标项目
• 点击左侧「项目设置」→「添加应用」→选择「Web」
• 填写应用名称后，复制生成的配置对象（包含apiKey、authDomain、projectId、messagingSenderId、appId等字段），这是客户端初始化Firebase的核心参数。

2. firebase-messaging-sw.js 说明与放置位置 #

• 这是FCM的服务工作线程文件，负责页面处于后台/关闭状态时接收、处理推送消息。
• 必须放置在网站根目录（与index.html同级），因为服务工作线程的作用域默认覆盖自身所在目录及子目录，根目录才能确保作用域覆盖整个网站。

3. 获取用户推送权限 #

先在HTML中引入Firebase模块化SDK，再请求权限：

<script type="module">
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
  import { getMessaging, requestPermission } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js';

  // 初始化Firebase应用
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  const app = initializeApp(firebaseConfig);
  const messaging = getMessaging(app);

  // 请求推送权限
  async function requestNotificationPermission() {
    try {
      const permission = await requestPermission(messaging);
      permission === 'granted' 
        ? console.log('用户已授权推送通知') 
        : console.log('用户拒绝了推送权限');
    } catch (err) {
      console.error('请求权限失败:', err);
    }
  }

  window.addEventListener('load', requestNotificationPermission);
</script>

4. 获取FCM Token #

用户授权成功后，调用getToken获取Token（需先在Firebase控制台→云消息传递→Web配置中生成VAPID密钥对）：

// 接上述代码，在权限授权成功后执行
import { getToken, onTokenRefresh } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js';

async function getFCMToken() {
  try {
    const vapidKey = 'YOUR_VAPID_PUBLIC_KEY'; // 替换为你的VAPID公钥
    const token = await getToken(messaging, { vapidKey });
    if (token) {
      console.log('FCM Token:', token);
      // 将Token发送到后端存储
      await fetch('/save-token', {
        method: 'POST',
        body: JSON.stringify({ token }),
        headers: { 'Content-Type': 'application/json' }
      });
    } else {
      console.log('未获取到Token：用户未授权或浏览器不支持');
    }
  } catch (err) {
    console.error('获取Token失败:', err);
  }
}

// 监听Token更新，自动同步到后端
onTokenRefresh(() => getFCMToken());

5. 配置messaging.onMessage()处理前台消息 #

页面处于前台时，用onMessage监听并处理消息：

import { onMessage } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js';

onMessage(messaging, (payload) => {
  console.log('前台收到消息:', payload);
  // 自定义通知展示逻辑
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/your-notification-icon.png'
  };

  if (Notification.permission === 'granted') {
    new Notification(notificationTitle, notificationOptions);
  }
});

6. 接收后台消息 #

在firebase-messaging-sw.js中配置服务工作线程：

// firebase-messaging-sw.js 完整内容
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应用
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

// 监听后台消息
messaging.onBackgroundMessage((payload) => {
  console.log('后台收到消息:', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/your-notification-icon.png'
  };

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

同时在前端页面注册服务工作线程：

// 放在之前的模块化脚本中
async function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    try {
      await navigator.serviceWorker.register('/firebase-messaging-sw.js');
      console.log('服务工作线程注册成功');
    } catch (err) {
      console.error('服务工作线程注册失败:', err);
    }
  }
}

window.addEventListener('load', registerServiceWorker);

服务端配置（Node.js） #

1. Firebase配置放置 #

• 登录Firebase控制台→项目设置→服务账号→点击「生成新的私钥」，下载JSON格式的服务账号密钥文件。
• 将该文件放在后端项目安全目录下（如根目录，禁止提交到版本控制系统），通过文件导入方式使用。

2. 发送FCM消息 #

先安装依赖：

npm install firebase-admin

编写发送逻辑：

const admin = require('firebase-admin');
const serviceAccount = require('./path/to/your/serviceAccountKey.json'); // 替换为密钥文件路径

// 初始化Firebase Admin
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const messaging = admin.messaging();

// 发送单个消息到指定Token
async function sendSingleMessage(token) {
  const message = {
    notification: {
      title: '测试通知',
      body: '来自Node.js后端的FCM推送消息'
    },
    token
  };

  try {
    const response = await messaging.send(message);
    console.log('消息发送成功:', response);
  } catch (err) {
    console.error('消息发送失败:', err);
  }
}

// 发送批量消息到多个Token
async function sendBatchMessage(tokens) {
  const message = {
    notification: {
      title: '批量测试通知',
      body: '这是一条批量推送消息'
    },
    tokens
  };

  try {
    const response = await messaging.sendMulticast(message);
    console.log('成功发送:', response.successCount, '条');
    console.log('发送失败:', response.failureCount, '条');
    // 处理失败的消息
    response.responses.forEach((resp, idx) => {
      if (!resp.success) {
        console.error(`Token ${tokens[idx]} 发送失败:`, resp.error);
      }
    });
  } catch (err) {
    console.error('批量发送失败:', err);
  }
}

// 调用示例
sendSingleMessage('USER_FCM_TOKEN');
// sendBatchMessage(['TOKEN1', 'TOKEN2', 'TOKEN3']);

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