Flutter中点击FCM通知时NotificationResponse.payload为空的问题解决

问题场景 #

我在开发Flutter移动端应用，需求是用户收到FCM推送通知并点击时，利用消息内的data字段跳转到对应页面。我的FCM消息结构如下：

const fcmMessage = {
  notification: {
    title: title,
    body: message
  },
  data:{
    type:'Chat',
    Name: 'Mike',
    body:'test'
  },
  android: {
    notification: {
      title:title,
      body: message,
      channel_id:'high_importance_channel'
    }
  },
  token: msgToken,
};

使用flutter_local_notifications初始化后，点击通知时NotificationResponse.payload始终为空字符串，无法获取FCM消息中的data对象。相关回调代码如下：

void onDidReceiveNotificationResponse(NotificationResponse notificationResponse) async {
  print(notificationResponse.payload);
}

完整main方法代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Set the background messaging handler early on, as a named top-level function
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  if (!kIsWeb) {
    channel = const AndroidNotificationChannel(
      'high_importance_channel', // id
      'High Importance Notifications', // title
      importance: Importance.high,
    );
  }


flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

var initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  var initializationSettingsIOs = DarwinInitializationSettings();
  var initSettings = InitializationSettings(
      android: initializationSettingsAndroid, iOS: initializationSettingsIOs);

  void onDidReceiveNotificationResponse(NotificationResponse notificationResponse) async {
    print(notificationResponse.payload);
}
   
  await flutterLocalNotificationsPlugin.initialize(initSettings,onDidReceiveNotificationResponse: onDidReceiveNotificationResponse,);
            
  /// Create an Android Notification Channel.
  /// We use this channel in the `AndroidManifest.xml` file to override the
  /// default FCM channel to enable heads up notifications.
  await flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<
          AndroidFlutterLocalNotificationsPlugin>()
      ?.createNotificationChannel(channel);

  await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
    alert: true,
    badge: true,
    sound: true,
  );


  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('Got a message whilst in the foreground!');
    print('Message data: ${message.data}');

    if (message.notification != null) {
      RemoteNotification? notification = message.notification;
      AndroidNotification? android = message.notification?.android;
      FlutterLocalNotificationsPlugin s = FlutterLocalNotificationsPlugin();
      s.show(
        notification.hashCode,
        notification?.title,
        notification?.body,
        NotificationDetails(
          android: AndroidNotificationDetails(channel.id, channel.name,
              icon: 'launch_background',
              channelDescription: channel.description,
              importance: Importance.max,
              priority: Priority.high,
              ongoing: true,
              styleInformation: BigTextStyleInformation('')),
        ),
      );
    }
  });


  runApp(MyApp());
}

解决方案 #

在调用flutterLocalNotificationsPlugin.show()方法时，添加payload参数，将message.data通过jsonEncode编码后传入。之后在点击回调方法中，将payload解码为JSON对象即可获取data中的数据。

修改后的show方法代码：

s.show(
  payload: jsonEncode(message.data),
  notification.hashCode,
  notification?.title,
  notification?.body,
  NotificationDetails(
    android: AndroidNotificationDetails(channel.id, channel.name,
        icon: 'launch_background',
        channelDescription: channel.description,
        importance: Importance.max,
        priority: Priority.high,
        ongoing: true,
        styleInformation: BigTextStyleInformation('')),
  ),
);

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