启用FirebaseMessaging.onBackgroundMessage后WebView回调失效求助

问题说明 #

开发集成Firebase推送通知与WebView的Flutter应用时，调用FirebaseMessaging.onBackgroundMessage(firebaseMessagingBackgroundHandler)后，flutter_webview_plugin的onUrlChanged流订阅会停止工作，移除该后台消息注册代码后功能立即恢复正常。同类问题已有反馈但暂无官方进展，以下是可行解决方案。

示例问题代码 #

late StreamSubscription<String> _onUrlChanged;

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(firebaseMessagingBackgroundHandler);
  // ...其他初始化代码
}

@override
void initState() {
  // ...其他初始化
  _onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
    print("URL: $url");
  });
  // ...
}

@override
Widget build(BuildContext context) {
  return WebviewScaffold(
    ignoreSSLErrors: true,
    url: selectedUrl,
    javascriptChannels: jsChannels,
    mediaPlaybackRequiresUserGesture: false,
    appBar: AppBar(
      title: const Text('Widget WebView'),
    ),
    withZoom: true,
    withLocalStorage: true,
    hidden: false,
    initialChild: Container(
      color: Colors.redAccent,
      child: const Center(
        child: Text('loading...'),
      ),
    ),
  );
}

可行解决方案 #

方案1：替换为官方WebView插件（推荐） #

flutter_webview_plugin属于维护状态不佳的第三方插件，与Firebase后台消息的Isolate机制存在兼容性问题。改用官方维护的webview_flutter插件，其URL监听逻辑更稳定，且能与Firebase服务良好共存。

1. 在pubspec.yaml中替换依赖：

dependencies:
  webview_flutter: ^4.4.0 # 使用最新稳定版

2. 修改代码实现URL监听：

import 'package:webview_flutter/webview_flutter.dart';

class YourWebViewPage extends StatefulWidget {
  final String selectedUrl;
  const YourWebViewPage({super.key, required this.selectedUrl});

  @override
  State<YourWebViewPage> createState() => _YourWebViewPageState();
}

class _YourWebViewPageState extends State<YourWebViewPage> {
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          // 监听URL变化（页面开始加载时触发）
          onPageStarted: (String url) {
            print("URL: $url");
          },
          // 也可选择在页面加载完成时处理
          onPageFinished: (String url) {
            // print("URL loaded: $url");
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.selectedUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Widget WebView')),
      body: WebViewWidget(controller: _webViewController),
    );
  }
}

方案2：针对原插件修复订阅逻辑 #

若必须继续使用flutter_webview_plugin，可通过App生命周期回调在应用恢复前台时重新订阅流，避免后台消息触发后流连接中断：

@override
void initState() {
  super.initState();
  _subscribeToUrlChanges();
}

void _subscribeToUrlChanges() {
  // 先取消已有订阅，避免重复订阅
  _onUrlChanged?.cancel();
  _onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
    print("URL: $url");
  });
}

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  super.didChangeAppLifecycleState(state);
  // 应用恢复到前台时重新订阅
  if (state == AppLifecycleState.resumed) {
    _subscribeToUrlChanges();
  }
}

@override
void dispose() {
  _onUrlChanged?.cancel();
  flutterWebViewPlugin.dispose();
  super.dispose();
}

方案3：隔离后台消息回调逻辑 #

确保Firebase后台消息的回调函数firebaseMessagingBackgroundHandler仅执行必要的后台操作，不涉及任何UI或主线程相关的逻辑，避免干扰WebView的流订阅：

Future<void> firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  // 仅处理后台消息逻辑，比如推送本地通知、记录日志等
  print("Handling a background message: ${message.messageId}");
}

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