Progressive Web Apps无法获取Firebase令牌问题求助

问题核心 #

基于PWA的项目使用FCM实现推送通知，此前运行正常，上月起无法接收推送。排查发现调用firebase.messaging().getToken()时，请求POST https://fcm.googleapis.com/fcm/connect/subscribe失败，导致无法生成访问令牌；同一Firebase账号下，一个应用能正常生成令牌，另一个应用出现异常。

排查步骤 #

• 核对Firebase应用配置
  重点检查异常应用的firebase-messaging-sw.js：

  • 确认文件放置在网站根目录（必须与manifest.json同层级）
  • 初始化代码中的messagingSenderId需与Firebase控制台对应应用的Sender ID完全匹配
  • 前往控制台项目设置→云消息传递标签，确认该应用的Cloud Messaging服务已启用

• 域名与授权配置检查

  • 在Firebase控制台项目设置→应用标签下，将当前域名添加到PWA应用的「授权网域」列表
  • 确认manifest.json中的gcm_sender_id为固定值"103953800507"，不可替换为自定义Sender ID

• 解析网络错误细节
  从Chrome网络面板的错误日志提取关键信息：

  • 若返回401/403：检查Firebase初始化使用的apiKey是否有效，是否存在IP限制或API密钥权限配置错误（前往控制台→API和服务→凭据查看对应密钥的限制设置）
  • 若返回400：检查请求体参数是否合法，例如推送订阅的endpoint是否正确，是否存在Service Worker注册失败的前置问题

• Service Worker状态验证
  打开Chrome开发者工具→Application→Service Workers，确认firebase-messaging-sw.js已正常注册且无报错；可尝试手动注销并重新注册Service Worker，清除浏览器缓存后重试getToken()调用

• SDK版本兼容性排查
  检查项目中Firebase SDK的版本，旧版本可能存在兼容性问题，建议升级到最新稳定版（如firebase@9.x及以上），注意v9+采用模块化语法，需适配调整代码

调试代码示例 #

为getToken()添加错误捕获，打印详细错误信息辅助定位：

firebase.messaging().getToken({ vapidKey: '你的VAPID密钥' })
  .then((token) => {
    console.log('令牌生成成功:', token);
  })
  .catch((error) => {
    console.error('令牌生成失败详情:', error);
    console.error('错误码:', error.code);
    console.error('错误信息:', error.message);
  });

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