Flutter应用在后台时如何实现类似微信的通知提示

在开发Flutter应用时，如何实现类似微信的后台通知提示功能？当应用切换到后台或手机锁屏时，仍然能及时显示新消息通知，并保持一定的交互能力（如点击通知跳转）。目前尝试了firebase_messaging插件，但发现通知展示和点击响应不够稳定，尤其在iOS平台上。请问有哪些可靠的方案或最佳实践？需要兼顾Android和iOS的兼容性。

2 回复

在Flutter中，可通过firebase_messaging插件接收后台消息，结合本地通知flutter_local_notifications显示通知。需配置Android的Firebase Cloud Messaging和iOS的APNs。

更多关于Flutter应用在后台时如何实现类似微信的通知提示的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现后台通知提示，推荐使用Firebase Cloud Messaging（FCM）配合本地通知插件。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  firebase_messaging: ^14.7.9
  flutter_local_notifications: ^17.2.0

2. 配置Firebase

  • 在Firebase控制台创建项目
  • 添加Android应用（包名与app一致）
  • 下载 google-services.json 到 android/app/ 目录
  • 对于iOS，需配置APNs证书

3. 初始化通知

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class NotificationService {
  static final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  static final FlutterLocalNotificationsPlugin _notificationsPlugin = FlutterLocalNotificationsPlugin();

  static Future<void> initialize() async {
    // 初始化本地通知
    const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
    const DarwinInitializationSettings iosSettings = DarwinInitializationSettings();
    const InitializationSettings settings = InitializationSettings(
      android: androidSettings,
      iOS: iosSettings,
    );
    await _notificationsPlugin.initialize(settings);

    // 请求权限
    NotificationSettings permission = await _firebaseMessaging.requestPermission();
    if (permission.authorizationStatus == AuthorizationStatus.authorized) {
      // 获取FCM token
      String? token = await _firebaseMessaging.getToken();
      print("FCM Token: $token");
    }

    // 处理后台消息
    FirebaseMessaging.onMessage.listen(_showForegroundNotification);
    FirebaseMessaging.onMessageOpenedApp.listen(_handleMessageOpened);
  }

  static Future<void> _showForegroundNotification(RemoteMessage message) async {
    const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
      'channel_id',
      'Channel Name',
      importance: Importance.max,
      priority: Priority.high,
    );
    const DarwinNotificationDetails iosDetails = DarwinNotificationDetails();
    const NotificationDetails details = NotificationDetails(
      android: androidDetails,
      iOS: iosDetails,
    );
    
    await _notificationsPlugin.show(
      DateTime.now().millisecondsSinceEpoch ~/ 1000,
      message.notification?.title,
      message.notification?.body,
      details,
    );
  }

  static void _handleMessageOpened(RemoteMessage message) {
    // 处理用户点击通知后的逻辑
    print('Message opened: ${message.data}');
  }
}

4. 在main函数中初始化

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NotificationService.initialize();
  runApp(MyApp());
}

5. 处理后台消息（Android）

在 android/app/src/main/AndroidManifest.xml 中添加：

<service
    android:name="io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingBackgroundService"
    android:exported="false" />

关键点说明：

  • 前台通知：通过onMessage监听并显示本地通知
  • 后台通知：FCM自动处理，需确保正确配置Firebase
  • 点击处理：通过onMessageOpenedApp处理用户交互
  • 数据消息：可通过message.data传递自定义数据

这样即可实现类似微信的后台通知效果，支持显示标题、内容，并能处理用户点击操作。

回到顶部