Flutter教程实现推送通知点击跳转

在Flutter中实现推送通知点击跳转时遇到问题，我已经按照教程集成了Firebase Messaging插件，能够正常接收推送通知。但当点击通知时，无法正确跳转到指定页面。具体表现为：

  1. Android平台点击通知后只打开应用主页，没有跳转到目标页面
  2. iOS平台有时完全没反应，有时会崩溃
  3. 后台和前台通知的处理逻辑是否有区别？

目前我的代码中已经配置了onMessageOpenedApp回调，也尝试了initialMessage，但都不稳定。请问如何确保在不同平台和不同应用状态下（前台/后台/终止）都能正确跳转？是否需要额外配置路由或处理原生端代码？

3 回复

要实现Flutter推送通知点击时跳转到指定页面，可以按照以下步骤操作：

  1. 添加依赖：在pubspec.yaml中加入firebase_messaging插件。

  2. 初始化Firebase：确保在项目中正确配置了Firebase（下载google-services.json并添加到Android项目中，以及GoogleService-Info.plist到iOS项目）。

  3. 监听消息：使用FirebaseMessaging.onMessageOpenedApp监听用户点击通知的行为。

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  Navigator.pushNamed(context, '/${message.data['route']}');
});

  4. 设置通知路由参数：在发送通知时，在JSON payload中包含目标页面的路由信息。

  5. 处理后台/关闭状态的消息：还需要监听onBackgroundMessage，确保应用在后台时也能正确处理。

  6. 测试功能：通过Firebase控制台发送测试通知，验证点击后是否能跳转至指定页面。

确保每一步都按官方文档操作，并根据需求调整代码。

更多关于Flutter教程实现推送通知点击跳转的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现点击推送通知后跳转到指定页面，首先需要在 Flutter 项目中集成推送服务，比如 Firebase Cloud Messaging (FCM)。以下为基本步骤：

  1. 配置 FCM：在 Firebase 控制台创建项目并添加 Android 应用，下载 google-services.json 文件放入 Android 项目根目录，并在 build.gradle 中应用插件和配置依赖。

  2. 创建通知接收类继承 FirebaseMessagingService，重写 onMessage()、onMessageOpenedApp() 方法来处理通知事件。例如，在 onMessageOpenedApp() 中解析通知数据，获取目标页面信息。

public class MyFirebaseMessagingService extends FirebaseMessagingService {
    @Override
    public void onMessageOpenedApp(RemoteMessage remoteMessage) {
        super.onMessageOpenedApp(remoteMessage);
        Intent intent = new Intent(this, TargetActivity.class);
        startActivity(intent);
    }
}

  1. 在 AndroidManifest.xml 中注册该服务并设置启动模式为单实例。

  2. 在 Flutter 代码中监听路由变化或使用全局变量更新 UI。

注意，实际开发时需根据业务需求调整页面参数传递逻辑。

在Flutter中实现推送通知点击跳转，可以使用firebase_messaging和flutter_local_notifications插件。以下是实现步骤：

  1. 添加依赖
dependencies:
  firebase_messaging: ^14.6.3
  flutter_local_notifications: ^15.1.1
  1. 基本实现代码
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化通知
  await initNotifications();
  
  // 设置消息处理
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    showNotification(message);
  });

  // 处理点击通知
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    handleNotificationClick(message);
  });
  
  runApp(MyApp());
}

// 初始化通知设置
Future<void> initNotifications() async {
  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  
  final InitializationSettings initializationSettings =
      InitializationSettings(android: initializationSettingsAndroid);
  
  await flutterLocalNotificationsPlugin.initialize(initializationSettings,
      onDidReceiveNotificationResponse: (NotificationResponse response) {
    // 处理本地通知点击
    if (response.payload != null) {
      Navigator.push(context, MaterialPageRoute(
        builder: (context) => NotificationPage(data: response.payload)));
    }
  });
}

// 显示通知
void showNotification(RemoteMessage message) {
  const AndroidNotificationDetails androidPlatformChannelSpecifics =
      AndroidNotificationDetails('your_channel_id', 'your_channel_name',
          importance: Importance.max, priority: Priority.high);
  
  final NotificationDetails platformChannelSpecifics =
      NotificationDetails(android: androidPlatformChannelSpecifics);
  
  flutterLocalNotificationsPlugin.show(
    0,
    message.notification?.title,
    message.notification?.body,
    platformChannelSpecifics,
    payload: message.data['route'],
  );
}

// 处理通知点击
void handleNotificationClick(RemoteMessage message) {
  Navigator.push(context, MaterialPageRoute(
    builder: (context) => NotificationPage(data: message.data)));
}
  1. 后台消息处理 需要在android/app/src/main/AndroidManifest.xml中添加：
<service
    android:name=".Application.FirebaseMessagingService"
    android:exported="false">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>
  1. 创建后台处理类 (Android)
public class FirebaseMessagingService extends FirebaseMessagingService {
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);
        // 处理后台消息
    }
}

注意事项：

  1. 需要配置Firebase项目
  2. iOS需要额外配置
  3. 测试时需要真机测试，模拟器可能无法正常工作
回到顶部