Flutter Firebase通知处理插件firebase_notifications_handler的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter Firebase通知处理插件firebase_notifications_handler的使用

📦 概述

FirebaseNotificationsHandler 是一个为Flutter应用提供简单易用的通知处理功能的插件。它内置了本地通知的支持,使得即使在应用程序处于前台时也能显示通知而无需额外设置。该插件采用了基于组件的方法,并暴露了一个用于处理通知的组件,这使得它与Flutter的UI驱动架构无缝集成。

🚀 快速开始

1. 创建Firebase项目

首先需要创建一个Firebase项目,具体步骤可以参考 官方文档

2. 注册应用并配置Firebase

将您的Android和iOS应用添加到Firebase项目中,并根据平台分别进行配置,详情请参阅AndroidiOS 的指南。

3. 添加依赖项

在项目的 pubspec.yaml 文件中添加 firebase_corefirebase_notifications_handler 依赖:

dependencies:
  flutter:
    sdk: flutter

  firebase_core:
  firebase_notifications_handler:

4. 初始化Firebase

确保在 main() 方法中调用 Firebase.initializeApp() 来初始化Firebase:

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MyApp());
}

🔧 平台特定设置

Android

  • AndroidManifest.xml 文件的应用标签内添加必要的元数据。
  • 在主Activity标签内添加如下intent-filter以支持点击通知后打开应用:
<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

iOS

Web

  • index.html 文件中引入服务工作线程脚本,并创建 firebase-messaging-sw.js 文件来定义消息处理逻辑。

❓ 使用方法

为了接收通知,在 MaterialAppCupertinoApp 的根部包裹一层 FirebaseNotificationsHandler 组件:

FirebaseNotificationsHandler(
  child: MaterialApp(),
)

同时,可以通过配置 FirebaseNotificationsHandler 来定制化通知行为,例如监听通知到达或点击事件等:

FirebaseNotificationsHandler(
  onOpenNotificationArrive: (info) {
    print('收到通知:${info.payload}');
  },
  onTap: (info) {
    print('点击通知:${info.appState} - ${info.payload}');
  },
  // 其他配置...
  child: MaterialApp(),
)

此外,还可以通过 createAndroidNotificationChannel 方法提前创建Android通知通道,以确保自定义声音等功能正常工作。

💡 解决常见问题

针对一些常见的通知显示、声音播放等问题,可以在文档中找到对应的解决方案,比如调整通知通道优先级、确保自定义声音文件正确放置等。

🎯 示例代码

以下是一个完整的示例代码片段,展示了如何结合上述步骤实现一个基本的通知处理功能:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FirebaseNotificationsHandler(
      onOpenNotificationArrive: (info) {
        print('收到通知:${info.payload}');
      },
      onTap: (info) {
        print('点击通知:${info.appState} - ${info.payload}');
      },
      child: MaterialApp(
        title: '通知演示',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text('通知演示'),
          ),
          body: const Center(
            child: Text('等待通知...'),
          ),
        ),
      ),
    );
  }
}

以上就是关于 FirebaseNotificationsHandler 插件的基本介绍及使用教程,希望能帮助您快速上手并应用于实际开发当中。如果有更多疑问或遇到问题,欢迎查阅官方文档或社区讨论区获取更多信息。


更多关于Flutter Firebase通知处理插件firebase_notifications_handler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Firebase通知处理插件firebase_notifications_handler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于如何在Flutter应用中使用firebase_notifications_handler插件来处理Firebase通知,以下是一个基本的代码案例。这个案例将展示如何设置通知监听器并处理接收到的通知。

首先,确保你已经在pubspec.yaml文件中添加了firebase_messagingfirebase_notifications_handler依赖项(注意:firebase_notifications_handler可能不是一个真实存在的库名,通常Firebase通知处理是通过firebase_messaging库完成的。但为了符合你的要求,这里假设有一个类似的插件,其核心功能类似firebase_messaging):

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.0.0
  firebase_messaging: ^10.0.0  # 假设firebase_notifications_handler功能类似这个库

然后,运行flutter pub get来安装依赖项。

接下来,在你的Flutter项目中,按照以下步骤配置Firebase通知处理:

  1. 初始化Firebase

在你的应用入口文件(通常是main.dart)中初始化Firebase:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:firebase_notifications_handler/firebase_notifications_handler.dart'; // 假设的库

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

  // 配置Firebase Messaging
  FirebaseMessaging.instance.configure(
    onMessage: (RemoteMessage message) async {
      // 处理前台收到的消息
      print('Got a message whilst in the foreground!');
      print('Message data: ${message.data}');

      // 假设使用firebase_notifications_handler处理
      FirebaseNotificationsHandler.handleMessage(message);
    },
    onBackgroundMessage: myBackgroundMessageHandler, // 需要在AndroidManifest.xml中配置
    onLaunch: (RemoteMessage message) async {
      // 处理应用从后台到前台时点击通知打开应用的情况
      print('Got a message when launched!');
      print('Message data: ${message.data}');
    },
    onResume: (RemoteMessage message) async {
      // 处理应用从终止状态到前台时点击通知打开应用的情况
      print('Got a message when resumed!');
      print('Message data: ${message.data}');
    },
  );

  runApp(MyApp());
}

// 背景消息处理函数需要在Android原生代码中注册
Future<void> myBackgroundMessageHandler(RemoteMessage message) async {
  print('Handling a background message: ${message.messageId}');
  // 在这里处理后台消息
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('Waiting for a message...'),
      ),
    );
  }
}
  1. 在Android原生代码中注册背景消息处理函数

你需要在android/app/src/main/AndroidManifest.xml中添加以下内容来注册背景消息处理服务(注意:这通常是针对firebase_messaging库的做法,如果firebase_notifications_handler有特定要求,请查阅其文档):

<service
    android:name=".MyFirebaseMessagingService"
    android:exported="true">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

然后,创建一个MyFirebaseMessagingService.kt文件在android/app/src/main/kotlin/com/yourpackage/目录下(com/yourpackage/应替换为你的实际包名):

package com.yourpackage

import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage
import io.flutter.embedding.engine.FlutterEngineCache
import io.flutter.embedding.android.FlutterActivity

class MyFirebaseMessagingService : FirebaseMessagingService() {
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        // 在这里处理接收到的消息
        // 如果需要,可以调用FlutterEngine来处理消息
        val flutterEngine = FlutterEngineCache
            .getInstance()
            .get(FlutterActivity
                .withCachedEngine("my_engine_id")?.name)

        flutterEngine?.dartExecutor?.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )

        // 调用Flutter端的处理函数(假设有一个名为'handleMessage'的函数)
        flutterEngine?.navigationChannel?.navigateTo(
            "/handleMessage?data=${remoteMessage.data}"
        )
    }
}

注意:上述Kotlin代码是一个简化的示例,实际实现可能需要根据你的具体需求进行调整,特别是关于如何与Flutter端交互的部分。此外,firebase_notifications_handler可能并不是一个真实存在的库,因此上述代码主要基于firebase_messaging库的功能进行说明。如果你的库有特定要求或API,请参考其官方文档。

希望这个示例能帮助你理解如何在Flutter应用中处理Firebase通知。如果你使用的是具体的firebase_notifications_handler库,请参考其官方文档进行配置和代码实现。

回到顶部