按Firebase指南配置JS客户端遇‘Service messaging is not available’报错求助

以下是针对你遇到的Firebase Cloud Messaging初始化报错的具体排查点：

• 确认Firebase初始化配置包含messagingSenderId
  初始化Firebase App时，必须确保配置对象里包含messagingSenderId，这个值可以在Firebase控制台的Web应用设置页面找到（在“Cloud Messaging”标签下的“Web配置”部分）。缺少这个参数会直接导致messaging服务无法初始化。

• 验证FCM模块的正确导入
  确保你已经从firebase/messaging模块导入了getMessaging方法，而不是只导入了Firebase App相关模块。正确的导入代码应该是：

  import { initializeApp } from "firebase/app";
  import { getMessaging } from "firebase/messaging";
  

• 检查Service Worker的注册状态
  FCM依赖Service Worker来接收消息，即使是localhost环境也需要正确注册对应的Service Worker文件：

  1. 在项目根目录创建firebase-messaging-sw.js文件，使用官方基础模板即可
  2. 在初始化messaging之前，通过代码注册Service Worker：

     await navigator.serviceWorker.register('/firebase-messaging-sw.js');
     

  如果Service Worker注册失败，浏览器控制台会有对应的错误提示，可以直接查看原因。

• 确认浏览器对FCM的支持
  部分浏览器的隐私模式、或者旧版本浏览器会限制Service Worker的使用，导致messaging服务不可用。可以尝试切换到常规模式，或者使用Chrome/Firefox等主流浏览器的最新版本测试。

• 检查FCM API的启用状态
  虽然你已经激活了Firebase Cloud Messaging API (V1)，但建议登录Google Cloud Console，找到对应项目的该API，确认其状态为“已启用”。有时候激活操作可能存在延迟，或者需要手动确认。

• 重新安装依赖包
  尝试删除node_modules目录和package-lock.json（或yarn.lock）文件，然后重新执行：

  npm install firebase@9.23.0 --save
  

  排除依赖包安装不完整导致的问题。

内容的提问来源于stack exchange，提问作者Christoph Köhler