已安装的React PWA接收Firebase通知几天后失效问题排查

针对React PWA使用FCM推送通知1-2天后后台无法接收的问题，结合安卓/iOS的共性表现，以下是核心原因及对应的解决方法：

1. FCM推送令牌失效/未及时更新 #

原因 #

PWA的FCM令牌稳定性弱于原生应用，系统更新、应用数据清除、PWA重新安装等操作都会导致令牌过期。如果未及时更新令牌，Firebase将无法定位到目标设备，推送自然失效。

修复方案 #

在React前端实现令牌刷新监听，将新令牌同步到你的后端或Firebase受众列表：

// 在React应用入口（如index.js）添加令牌刷新逻辑
messaging.onTokenRefresh(() => {
  messaging.getToken()
    .then(refreshedToken => {
      console.log('令牌已刷新:', refreshedToken);
      // 将新令牌发送到后端存储，用于后续推送
    })
    .catch(err => {
      console.error('刷新令牌失败:', err);
    });
});

如果使用FCM主题推送，主题订阅会自动处理令牌更新，可优先考虑这种方式。

2. 服务工作线程（Service Worker）被系统回收 #

原因 #

安卓/iOS系统会在资源紧张时回收后台Service Worker，PWA的Service Worker存活周期通常短于原生应用的后台进程，1-2天后可能被彻底杀死，无法监听onBackgroundMessage事件。

修复方案 #

• 确保Service Worker正确注册：在React应用入口绑定Service Worker与FCM实例：

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then(registration => {
        messaging.useServiceWorker(registration);
      })
      .catch(err => {
        console.error('Service Worker注册失败:', err);
      });
  }
  

• 添加存活保活逻辑：在firebase-messaging-sw.js中加入轻量定时唤醒代码，避免被系统过早回收：

  // 每分钟唤醒一次Service Worker（避免过度消耗资源）
  setInterval(() => {
    console.log('Service Worker 保持活跃');
  }, 60000);
  

• 简化Service Worker代码：移除不必要的逻辑，减少内存占用，降低被回收的概率。

3. 系统后台限制/电池优化拦截 #

原因 #

安卓的Doze模式、App Standby，iOS的后台刷新限制，都会阻止PWA的Service Worker在后台运行，导致无法接收推送。这类限制通常在应用后台停留1-2天后触发。

修复方案 #

• 引导用户关闭限制：提示用户：
  • 安卓：前往应用设置关闭「电池优化」
  • iOS：开启PWA的「后台App刷新」权限，并确保PWA已添加到主屏幕
• 优化PWA配置：在manifest.json中添加以下配置，提升PWA的系统优先级：

  {
    "display": "standalone",
    "background_color": "#ffffff",
    "scope": "/",
    "start_url": "/"
  }
  

4. FCM推送配置不合理 #

原因 #

从你的配置截图来看，若通知优先级设置为「正常」，系统可能会延迟或忽略后台推送；另外如果推送目标受众无效，也会导致通知无法送达。

修复方案 #

• 设置高优先级：在Firebase控制台的Campaigns中，将通知优先级改为「高」，绕过系统后台推送限制
• 区分消息类型：如果推送的是纯data消息，需确保Service Worker能正确解析；若使用notification消息，FCM会直接处理后台通知，可减少Service Worker的依赖

5. 通知权限过期或被关闭 #

原因 #

用户可能在安装PWA后手动关闭通知权限，或系统自动重置权限，导致后续推送被拦截。

修复方案 #

在应用中定期检查权限状态，引导用户重新开启：

// 在React组件中添加权限检查
Notification.requestPermission().then(permission => {
  if (permission !== 'granted') {
    // 引导用户前往系统设置开启通知权限
    alert('请开启通知权限以接收每日提醒');
  }
});

内容的提问来源于stack exchange，提问作者Shreyas Nisal