Flutter Web应用使用Firebase推送时如何实现点击通知跳转指定页面

1. 前置依赖与基础配置 #

• 先在pubspec.yaml中引入依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^latest_version
  firebase_messaging: ^latest_version

• 提前配置好应用内的路由规则，无论是用原生命名路由还是go_router等第三方路由库，确保需要跳转的页面路由地址提前注册完成。
• 在web目录下新增firebase-messaging-sw.js文件，配置Firebase服务工作线程，用来接收后台状态的推送通知：

importScripts("https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.10.0/firebase-messaging-compat.js");

// 替换为你自己的Firebase项目配置
firebase.initializeApp({
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId"
});

const messaging = firebase.messaging();

2. 推送通知Payload配置 #

发送推送时，需要把跳转目标路由、参数等信息放在data字段中，示例Payload结构如下：

{
  "notification": {
    "title": "通知标题",
    "body": "通知内容"
  },
  "data": {
    "target_route": "/order/detail",
    "order_id": "123456"
  },
  "to": "用户设备的FCM Token"
}

注意：Web端推送必须同时携带notification和data字段，否则后台状态下可能无法正常触发点击回调

3. 前端通知监听与跳转逻辑 #

首先在应用入口完成Firebase初始化，之后申请通知权限，再配置两种场景的消息监听：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    // 替换为你的Firebase项目配置
    options: const FirebaseOptions(
      apiKey: "xxx",
      authDomain: "xxx",
      projectId: "xxx",
      storageBucket: "xxx",
      messagingSenderId: "xxx",
      appId: "xxx",
    ),
  );
  // 申请通知权限
  await FirebaseMessaging.instance.requestPermission();
  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  void initState() {
    super.initState();
    // 处理应用完全关闭时，点击通知启动应用的场景
    _handleInitialMessage();
    // 处理应用在后台挂起时，点击通知唤醒应用的场景
    _handleMessageOpenedApp();
  }

  Future<void> _handleInitialMessage() async {
    RemoteMessage? initialMessage = await FirebaseMessaging.instance.getInitialMessage();
    if (initialMessage != null) {
      _navigateByMessage(initialMessage);
    }
  }

  void _handleMessageOpenedApp() {
    FirebaseMessaging.onMessageOpenedApp.listen(_navigateByMessage);
  }

  void _navigateByMessage(RemoteMessage message) {
    final targetRoute = message.data['target_route'];
    final args = message.data['order_id'];
    if (targetRoute != null && navigatorKey.currentState != null) {
      navigatorKey.currentState!.pushNamed(targetRoute, arguments: args);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      // 注册路由表
      routes: {
        '/': (context) => const HomePage(),
        '/order/detail': (context) => const OrderDetailPage(),
      },
      // 处理带参数的路由跳转
      onGenerateRoute: (settings) {
        if (settings.name == '/order/detail') {
          final orderId = settings.arguments as String;
          return MaterialPageRoute(
            builder: (context) => OrderDetailPage(orderId: orderId),
          );
        }
        return null;
      },
    );
  }
}

如果应用在前台时收到通知需要弹窗支持跳转，额外增加FirebaseMessaging.onMessage.listen监听，自行实现前台通知弹窗后绑定点击跳转逻辑即可。

常见注意事项 #

• 部署应用时，需要将你的站点域名添加到Firebase控制台的授权域名列表中，否则无法正常接收推送
• 本地调试时使用localhost即可正常测试，不需要额外配置域名

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