Flutter中点击Firebase推送通知打开带通知内链接的WebView如何实现

1. 前置依赖配置 #

先确认项目已引入两个核心依赖：

• firebase_messaging：用于处理Firebase推送全链路逻辑
• webview_flutter：用于加载网页的官方WebView组件

推送的payload需要提前和后端/运营约定好，跳转链接放在data字段内，示例结构如下：

推送payload参考：

{
  "notification": {
    "title": "活动通知",
    "body": "点击查看专属优惠"
  },
  "data": {
    "jump_url": "https://目标页面链接.com"
  }
}

2. 全局配置推送点击监听 #

建议在根组件的initState生命周期内配置监听，同时覆盖应用后台存活、应用完全杀死两种场景的点击触发逻辑：

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    // 处理应用后台存活时，用户点击通知的逻辑
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      _handlePushJump(message);
    });

    // 处理应用完全杀死时，用户点击通知启动应用的逻辑
    FirebaseMessaging.instance.getInitialMessage().then((RemoteMessage? message) {
      if (message != null) {
        _handlePushJump(message);
      }
    });
  }

  // 统一处理推送跳转逻辑
  void _handlePushJump(RemoteMessage message) {
    // 从data字段取出跳转链接
    String? targetUrl = message.data['jump_url'];
    if (targetUrl != null && targetUrl.isNotEmpty) {
      // 跳转WebView页面，传入链接参数
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => CommonWebView(url: targetUrl),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '推送跳转Demo',
      home: const HomePage(),
    );
  }
}

3. 实现通用WebView页面 #

封装可传入链接的通用WebView页面，直接复用即可：

import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<CommonWebView> createState() => _CommonWebViewState();
}

class _CommonWebViewState extends State<CommonWebView> {
  late final WebViewController _webController;

  @override
  void initState() {
    super.initState();
    _webController = WebViewController()
      // 根据业务需求配置是否允许JS执行
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.url));
  }

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

注意事项 #

• 安卓端需要在AndroidManifest.xml中添加网络权限，否则WebView无法加载网页：

  <uses-permission android:name="android.permission.INTERNET" />
  

• 如果项目用命名路由管理页面，替换Navigator.push部分的逻辑为命名路由跳转，链接作为参数传递即可
• 如果不需要新开页面，想在当前页弹出WebView，把跳转逻辑替换为显示Dialog，在Dialog内部嵌入WebViewWidget即可

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