如何使用原生JavaScript集成Web版Firebase v9 Cloud Messaging并解决报错

报错原因说明 #

1. Firebase 9 默认遵循ES Module规范提供SDK，import语法是浏览器原生支持的标准特性，并非Node.js独有，不需要Node环境即可运行
2. 非compat后缀的Firebase 9 SDK不会挂载全局对象，直接用普通script标签引入非compat包时，无法在全局作用域访问initializeApp等方法
3. 你原有代码中直接导入auth、firestore等对象的写法不符合Firebase 9模块化API的导出规则，正确导出的是getAuth、getFirestore这类工厂方法

方案1：原生ES Module方式（官方推荐） #

使用type="module"的script标签，所有Firebase相关逻辑写在该模块内部即可：

<script type="module">
  // 导入核心API和Cloud Messaging相关API
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js'
  import { getMessaging, getToken, onMessage } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-messaging.js'

  // 替换为你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  }

  // 初始化Firebase实例
  const app = initializeApp(firebaseConfig)
  // 初始化Messaging实例
  const messaging = getMessaging(app)

  // 示例：请求通知权限，获取推送token
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // vapidKey为Firebase控制台中「云消息传递」设置下的Web推送证书公钥
      getToken(messaging, { vapidKey: "YOUR_VAPID_PUBLIC_KEY" }).then(token => {
        console.log('推送Token：', token)
        // 此处可将token上传至你的业务服务端存储
      })
    }
  })

  // 示例：监听应用前台收到的推送消息
  onMessage(messaging, payload => {
    console.log('收到前台推送：', payload)
    // 可自定义消息提示逻辑
  })
</script>

注意：ES Module为隔离作用域，模块内导入的变量无法在模块外的普通script标签中访问，所有Firebase逻辑需写在该模块标签内。

方案2：兼容传统全局引入方式 #

如果不需要使用模块化写法，可引入带compat后缀的兼容包，API会挂载到全局window.firebase对象，用法和Firebase 8完全一致：

<!-- 引入兼容版SDK -->
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-messaging-compat.js"></script>
<script>
  // 替换为你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  }

  // 初始化
  const app = firebase.initializeApp(firebaseConfig)
  const messaging = firebase.messaging()

  // 后续逻辑与Firebase 8用法一致
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      messaging.getToken({ vapidKey: "YOUR_VAPID_PUBLIC_KEY" }).then(token => {
        console.log('推送Token：', token)
      })
    }
  })
</script>

额外说明 #

如果需要接收应用处于后台时的推送消息，需要在站点根目录添加firebase-messaging-sw.js服务工作线程文件，在该文件中按照上述两种方式之一初始化Firebase Messaging即可。

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