使用最新Firebase SDK开发FCM Web应用报messaging.onMessage不是函数求助

问题根因 #

你遇到的"messaging.onMessage" is not a function报错，是因为你使用的9.x版本Firebase JS SDK采用了全新的模块化API设计，废弃了8.x及更早版本的实例方法调用规则。你当前导入的是原生模块化的firebase-messaging.js，却还在使用旧版本的messaging.onMessage()、messaging.requestPermission()这类实例方法，自然无法识别。而你看到的官方示例用的firebase-messaging-compat.js是官方提供的兼容过渡包，保留了旧版API的调用方式，所以可以正常运行。

解决方案 #

提供两种可选方案，按需选择即可：

方案1：使用原生模块化API（推荐长期使用） #

这种是Firebase 9.x之后的标准用法，兼容层后续会逐步淘汰，适合新项目或者愿意适配新规范的项目。

修改步骤：

1. 调整导入语句，新增需要的模块化方法：

// 原有导入保留，修改messaging的导入内容
import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";

2. 重写权限申请和获取Token的逻辑：

function initFirebaseMessagingRegistration() {
  // 调用浏览器原生通知权限申请接口
  Notification.requestPermission()
  .then(function () {
    messageElement.innerHTML = "Got notification permission";
    console.log("Got notification permission");
    // 传入messaging实例调用getToken，vapidKey可在Firebase控制台项目设置的云消息传递板块生成
    return getToken(messaging, { vapidKey: "你的VAPID公钥" });
  })
  .then(function (token) {
    tokenElement.innerHTML = "Token is " + token;
  })
  .catch(function (err) {
    errorElement.innerHTML = "Error: " + err;
    console.log("Didn't get notification permission", err);
  });
}

3. 替换消息监听的写法，Firebase 9已自动处理Token刷新，不需要单独监听onTokenRefresh：

// 替换原有messaging.onMessage写法
onMessage(messaging, (payload) => {
  console.log("Message received. ", JSON.stringify(payload));
  notificationElement.innerHTML = notificationElement.innerHTML + " " + payload.data.notification;
});

删除原有的messaging.onTokenRefresh相关代码即可。

方案2：使用兼容层快速适配（适合旧项目快速迁移） #

如果不想修改原有业务逻辑，只需要把所有SDK的导入替换为compat版本即可，其余代码不需要任何改动：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics-compat.js";
import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging-compat.js";

替换完成后原有的messaging.onMessage、messaging.requestPermission、messaging.onTokenRefresh都可以正常运行。

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