如何实现Firebase通知点击后跳转至WebView页面？

核心实现步骤 #

1. 通知 payload 携带目标URL
   发送Firebase通知时，必须在data字段中添加自定义的url参数（示例：{"url": "https://example.com/target-page"}），这样App端才能获取到跳转地址。

2. 编写WebView页面组件
   先创建一个可接收URL参数的WebView页面，用于加载指定链接：

   import 'package:flutter/material.dart';
   import 'package:webview_flutter/webview_flutter.dart';
   
   class WebViewScreen extends StatefulWidget {
     final String targetUrl;
   
     const WebViewScreen({super.key, required this.targetUrl});
   
     @override
     State<WebViewScreen> createState() => _WebViewScreenState();
   }
   
   class _WebViewScreenState extends State<WebViewScreen> {
     late WebViewController controller;
   
     @override
     void initState() {
       super.initState();
       controller = WebViewController()
         ..loadRequest(Uri.parse(widget.targetUrl));
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('网页内容')),
         body: WebViewWidget(controller: controller),
       );
     }
   }
   

3. 补全通知点击监听逻辑
   在你提供的代码基础上，从RemoteMessage的data中提取URL，完成跳转逻辑：

   FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
     // 从通知的data字段中获取目标URL
     final String? targetUrl = message.data['url'];
   
     if (targetUrl != null && targetUrl.isNotEmpty) {
       Navigator.push(
         context,
         MaterialPageRoute(
           builder: (context) => WebViewScreen(targetUrl: targetUrl),
         ),
       );
     } else {
       // URL为空时的兜底处理，比如跳转到首页
       Navigator.push(
         context,
         MaterialPageRoute(builder: (context) => const HomeScreen()),
       );
     }
   });
   

覆盖全场景的补充处理 #

如果需要支持App未启动时点击通知跳转，要额外处理初始消息：

Future<void> setupFirebaseMessaging() async {
  // 处理App未启动时点击通知的情况
  RemoteMessage? initialMessage = await FirebaseMessaging.instance.getInitialMessage();
  if (initialMessage != null) {
    _handleNotificationTap(initialMessage);
  }

  // 处理App在前台/后台时点击通知的情况
  FirebaseMessaging.onMessageOpenedApp.listen(_handleNotificationTap);
}

void _handleNotificationTap(RemoteMessage message) {
  final String? targetUrl = message.data['url'];
  if (targetUrl != null && targetUrl.isNotEmpty) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => WebViewScreen(targetUrl: targetUrl)),
    );
  }
}

依赖说明 #

确保pubspec.yaml中已添加WebView依赖：

dependencies:
  webview_flutter: ^4.4.0 # 版本可按需调整

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