Flutter Web应用FCM推送通知页面重载后失效问题排查与解决

问题原因 #

1. 通知监听注册逻辑依赖权限弹窗触发：首次启动时，权限弹窗弹出后才执行推送监听的注册代码，但重载后权限已授权，弹窗不触发，导致监听代码未执行，无法接收推送。
2. 重载后FCM实例状态未完全初始化：浏览器重载会重置页面状态，Firebase Messaging实例可能未重新绑定监听，或Token因会话重置失效，导致推送通道中断。
3. Service Worker状态异常：Flutter Web的FCM依赖Service Worker处理后台推送，重载后Service Worker可能未正常激活，无法拦截推送消息。

解决方法 #

• 分离权限请求与监听注册逻辑：将FirebaseMessaging.onMessage、FirebaseMessaging.onBackgroundMessage等监听注册代码，从权限请求的分支中抽离，不管权限是否已授权，登录成功后都强制执行一次监听注册。示例代码：

// 登录逻辑中
await FirebaseMessaging.instance.requestPermission();
// 强制注册推送监听
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  // 处理前台推送消息
});
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

• 主动刷新并验证FCM Token：登录成功后主动获取Token，确保当前Token有效，并同步到后端服务器；同时监听Token变化，及时更新。示例：

String? token = await FirebaseMessaging.instance.getToken();
if (token != null) {
  // 将token上传到后端，用于定向推送
}
// 监听Token自动刷新事件
FirebaseMessaging.instance.onTokenRefresh.listen((newToken) {
  // 上传新token到后端更新
});

• 确保Service Worker正常运行：在登录逻辑中添加Service Worker的检查与激活逻辑，避免重载后Service Worker未就绪：

if ('serviceWorker' in navigator) {
  try {
    final registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
    if (registration.active == null && registration.waiting != null) {
      // 触发Service Worker激活
      await registration.waiting?.postMessage({'type': 'SKIP_WAITING'});
    }
  } catch (e) {
    print('Service Worker注册失败: $e');
  }
}

• 保证Firebase初始化完成后再操作：确保在Firebase.initializeApp()执行完成后，再处理FCM的权限请求、监听注册等逻辑，避免实例未就绪导致的异常：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

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