部署PWA时Firebase推送通知遇403 API_KEY_SERVICE_BLOCKED错误

核心排查与修复步骤 #

1. 聚焦当前Web应用使用的新API密钥配置（关键） #

别纠结控制台显示的旧密钥，重点检查生产环境实际在用的新API密钥限制：

• 进入Google Cloud控制台 → API和服务 → 凭据 → 找到目标Web API密钥
  • 应用限制：选择HTTP引用（网站），添加生产环境完整域名（需带https://，比如https://your-production-domain.com，子域名也要单独添加）
  • API限制：精确勾选Firebase Cloud Messaging API和Firebase Installations API，不要仅选“所有Firebase相关API”
  • 保存后等待5-10分钟让配置生效（Google权限配置存在延迟）

2. 确认FCM基础配置有效性 #

• 进入Firebase控制台 → 项目设置 → 云消息传递，确认FCM服务处于正常启用状态
• 核对前端firebaseConfig中的apiKey、messagingSenderId是否与当前Web应用的配置完全匹配

3. 本地/生产差异的原因（与HTTPS无关） #

localhost属于Firebase信任的白名单范围，不受API密钥的应用限制约束，因此本地能正常请求；而生产环境必须严格符合密钥的限制规则，这就是两者差异的核心，你的有效HTTPS证书不是问题所在。

4. 旧API密钥的处理 #

控制台显示已删除的旧密钥属于缓存残留，不会影响当前新密钥的功能，无需额外处理；若要清除，可联系Google Cloud支持协助，但不影响业务运行。

额外验证手段 #

用Postman直接测试新密钥的有效性：

POST https://fcmregistrations.googleapis.com/v1/projects/[你的项目ID]/registrations
Headers:
  Authorization: key=[你的新API密钥]
  Content-Type: application/json
Body:
  {
    "app": "projects/[你的项目ID]/apps/[你的Web应用ID]",
    "auth": "[Service Worker推送订阅对象的auth字段]",
    "endpoint": "[推送订阅对象的endpoint字段]",
    "p256dh": "[推送订阅对象的p256dh字段]"
  }

若返回403，说明密钥配置存在问题；若请求成功，则排查前端FCM初始化逻辑。

前端代码检查 #

• 确认Service Worker的scope配置正确，生产环境建议设置为/以覆盖所有页面
• 检查FCM初始化与Service Worker的绑定逻辑：

  const registration = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
  const messaging = firebase.messaging();
  messaging.useServiceWorker(registration);
  

内容的提问来源于stack exchange，提问作者Petar Tahchiev