flutter + firebase 云消息通知教程 (android-安卓、ios-苹果)

假如能看到这篇文章的 肯定已经对手机端的 消息推送通知 有了肯定相识。
国内安卓厂商这里不提都有本身的FCM 可自行查找。（国内因无法科学缘故原由 ，不能使用谷歌服务）只说外洋的。
目前 adnroid 和 ios 推送消息分别叫 FCM 和 APNs。这里通过 google 的 firebase  分别向两个平台 同时推送消息 只必要配置一套服务便可以。 （firebase 推送消息服务免费-它除消息推送 另有许多服务 收费+）跟多产品相识 https://firebase.google.com/pricing?authuser=0&hl=zh-cn
这里是firebase官网地址(必要VPN访问) https://firebase.google.com/
 **APNs 、FCM扩展信息

Apple Push Notification Service (APNs):

• 界说：
  
  
  
  • APNs 是由 Apple 提供的服务，允许开发者发送推送通知到 iOS 装备和 macOS 装备。
    
  
  
• 工作原理：
  
  
  
  • 当应用首次哀求通知权限并获得授权后，每个装备都会获得一个唯一的令牌 (Device Token)。
    
  • 开发者将这些令牌发送到本身的服务器。
    
  • 当必要发送推送通知时，开发者将通知和相干的令牌发送给 APNs。
    
  • APNs 根据令牌将通知推送到相应的装备。
    
  
  
• 特点：
  
  
  
  • 安全性：APNs 使用了端到端的加密，确保通知的安全传输。
    
  • 可靠性：APNs 提供了高可靠性的通知传递，即使装备离线也能保证消息的传递。
    
  
  

Firebase Cloud Messaging (FCM):

• 界说：
  
  
  
  • FCM 是由 Google 提供的跨平台消息传递服务，允许开发者发送推送通知到 Android 装备、iOS 装备和 Web 应用。
    
  
  
• 工作原理：
  
  
  
  • 应用首次启动或明确哀求时，每个装备会获得一个唯一的令牌。
    
  • 开发者将这些令牌发送到本身的服务器。
    
  • 当必要发送推送通知时，开发者使用 FCM 的服务来发送通知到相应的装备。
    
  
  
• 特点：
  
  
  
  • 跨平台：FCM 支持多种平台，包罗 Android、iOS 和 Web。
    
  • 高效性：FCM 提供了高效的消息传递，包罗可靠的消息传递和传递保证。
    
  • 集成：FCM 与其他 Firebase 服务（如 Firebase Analytics、Firebase Authentication 等）精麋集成，为开发者提供了全面的应用开发工具。
    
  
  

总结：

• APNs 和 FCM 都是用于发送推送通知的服务，但它们是由 Apple 和 Google 提供的，针对差别的操作体系和应用生态体系。
  
• 开发者可以根据其应用的需求和目标受众选择使用 APNs、FCM 或两者的组合来发送推送通知。
  

---

   以下是在 Mac 电脑下使用的。linux 应该区别不大。或许与window 下有肯定区别就是配置环境变量部分 自行辨别。
  一、注册 安装 firebase

• 进入firebase官网进行注册账号
  
  
  • 注册后要创建你的应用，下面关联项目的时候会让选择 其应用的。
    
  
  
• 创建 flutter 项目 
  
  
  • Flutter 开发文档 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter
    
  
  
• 安装  Firebase CLI （在命令行中）
  
  
  • 可以有多种安装方式， 我这里选了npm方式
    
    
    •  nodeJs (防小白：安装 nodeJs 会捆绑npm工具 )安装地址-下载LTS版即可->  Node.js
      
    • 各体系安装 nodeJs 方式不表明（自行查找教程，最好安装最新版本）
      
    
    
  • 安装 Firebase CLI  执行命令 - 具体教程  Firebase官方地址>>
    
    
    • 1. npm install -g firebase-tools

      复制代码
      1. （linux 和 mac 平台 最好前面加上sudo 否则可能会报 权限不足的错误 无法访问文件夹） 

      复制代码
    • linux 和 mac ：
      1. sudo npm install -g firebase-tools

      复制代码
      
      
    
    
  
  
• 登陆 Firebase 官方教程地址>>
  
  
  • 执行登陆命令：
    
    
    
    • 1. firebase login

      复制代码
      首先谷歌会问你是否同意收罗一些信息 改善使用 等等，No 即可，之后会打开一个浏览器页面 让你登陆账号，（我这里用的是本身的谷歌账号登陆的，假如浏览器已经登陆了 可以直接选择使用谷歌账号）。
      
    • 
      
      
    
    
  • 从任何目录运行以下命令来安装 FlutterFire CLI： 
    
    1. dart pub global activate flutterfire_cli

    复制代码
  • 安装竣事后 会提示一条信息 exprot PATH="$PATH": "$HOME/..........."
    
    
    • 复制此条信息 在命令行执行即可。（是在给 firebase 配置全局环境变量）
      
    • Windows 用户作何反应 不太清楚，估计会主动添加。
      
    
    
  
  
• 进入flutter 项目根目录
  
  
  • 启动应用配置工作流：
    1. flutterfire configure

    复制代码
  • 这里要选择你 一开始注册账号时创建的项目
    
    
    
  • 之后会让选择在哪些平台（空格键控制是否选中）选中 ios 和 andorid
    
  • 
    
    
  
  

到此为止就完成了所有根本配置 之后就要在flutter 中启用 firebase 了 。
 二、配置Flutter 项目

• 安装插件：
  
  
  • 1. flutter pub add firebase_core
    3. flutter pub add firebase_messaging

    复制代码
    
    
  
  
• 创建dart文件：
  
  
  • 下面回到flutter 项目里，在你所想建立的位置增加一个firebase_xxx.dart 文件，添加下面代码（名字随意）。 要注意的是 后台回调函数 onBackgroundMessage 它必须是顶级函数，意味着它不可以是类方法 也不可以是匿名函数。
    1. import 'package:firebase_messaging/firebase_messaging.dart';
    2. import 'package:get/get.dart';
    4. @pragma('vm:entry-point')
    5. Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
    6.   // If you're going to use other Firebase services in the background, such as Firestore,
    7.   // make sure you call `initializeApp` before using other Firebase services.
    8.   print("后台通知");
    9.   print("Handling a background message: ${message.messageId}");
    10.   print("title: ${message.notification?.title}");
    11.   print("body: ${message.notification?.body}");
    12.   print("payload: ${message.data}");
    13. }
    15. class FirebaseService {
    16.   final _firebaseMessaging = FirebaseMessaging.instance;
    18.   Future<void> initNotifications() async {
    19.     await _firebaseMessaging.requestPermission();
    20.     // await initPushNotifications();
    21.     // 获取Firebase Cloud 消息传递令牌
    22.     final fCMToken = await _firebaseMessaging.getToken();
    23.     // 后台运行通知回调
    24.     FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    25.     // 前台运行通知监听
    26.     FirebaseMessaging.onMessage.listen(handleMessage);
    27.     // 监听 后台运行时通过系统信息条打开应用
    28.     FirebaseMessaging.onMessageOpenedApp.listen(onMessageOpenedApp);
    29.     // 如需在每次令牌更新时获得通知
    30.     FirebaseMessaging.instance.onTokenRefresh.listen((fcmToken) {
    31.       // TODO: If necessary send token to application server.
    33.       // 每当生成新令牌时，都会触发此回调。
    34.     }).onError((err) {
    35.       // Error getting token.
    36.     });
    37.     print("message-Token:$fCMToken");
    38.   }
    40.   void onMessageOpenedApp(RemoteMessage message) {
    41.     print("打开通知");
    42.     print("Handling a background message: ${message.messageId}");
    43.     print("title: ${message.notification?.title}");
    44.     print("body: ${message.notification?.body}");
    45.     print("payload: ${message.data}");
    46.   }
    48.   void handleMessage(RemoteMessage? message) {
    49.     // 如果消息不是空的话
    50.     if (message == null) return;
    51.     // 用户点击通知， 进入特定该页面
    52.     // Get.toNamed("/home", arguments: message);
    53.     print("前台通知");
    54.     print("title: ${message.notification?.title}");
    55.     print("body: ${message.notification?.body}");
    56.     print("payload: ${message.data}");
    57.   }
    58. }

    复制代码
    
    
    • 这里的token 是用来测试发送消息的
      
    
    
  
  
•  在mian.dart中使用
  
  
  • main 函数中添加以下代码
    
  
  

1. import './services/firebase_api.dart';
2. // 引入你的 firebase_xxx.dart
4. void main() async {
5.   // 确保 Flutter 框架已经被初始化；
6.   WidgetsFlutterBinding.ensureInitialized();
8.   // 初始化云消息推送
9.   await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
10.   await FirebaseService().initNotifications();
11.   // ......

复制代码

       
三、针对ios配置项目（未配置ios可以忽略此项， 下面操作需Mac电脑参与且只能是mac电脑）

**前提要素：你已经注册好 Apple 开发者账户，并开通了开发者账户。而且必要配置好 xcode 根本开发描述文件，在这简单阐明。

• 创建开发环境证书：
  
  
  • 生成并安装下图框选的证书，至少也要安装画勾的。（假设你已经正常安装他们了）
    
    
    
    • 
      
      
    
    
  
  
• 创建你的ID ：
  
  
  • （相当于app Id）不然也是无法创建 描述文件的。选择你必要的插件，并勾选 Push  Notifications。并在后面创建你的通知证书下载到当地，双击安装它。创建证书必要上传 Mac电脑钥匙串步调颁发哀求证书，请按要求操作。
    
    
    
    • 
      
      
    • 
      
      
    
    
  
  
• 导出P12文件：
  
  
  • 找到 Mac 电脑里的（钥匙串）步调打开它，你更刚刚安装的 通知证书在这里 。鼠标右键点击你对应的证书导出 p12 文件。导出过程必要设置证书密码（未来设置推送要用到务必记住）
    
    
    • 
      
      
    
    
  
  
• 上传P12文件
  
  
  • 
    
    
  • 
    
    
  • 
    
    
  
  
• 配置Xcode
  
  
  • 上面会忽略创建描述文件过程。 请保证你的开发环境 描述文件已经在apple开发者账号创建，并在xcode中正常使用。如下图 （单击 provisioning profile 右侧感叹号 xcode 会告知你的描述文件是否合法 ）
    
    
    • 
      
      
    
    
  • 配置推送项目
    
    
    
  
  
• 完成。
  
  
  • 假如启动报错 请确保ios 依靠已经安装，在科学上网 下大概会导致pod依靠下载超时，断开署理。 flutter 项目中命令行 cd ios 进入文件夹内手动执行 一遍 pod install.
    
  
  

四、竣事（测试）：

到这里就竣事了 可以启动运行你的项目了。
**Android**

很重要的前提是 模仿器肯定要有 谷歌商店等全套服务。 否则可以启动但无法使用推送服务。
怎样辨别看模仿器 是否安装全家桶即可，如没有（可以去Andorid studio 中增加有谷歌商店的 模仿器）
**Ios**

Ios 前提必要真机才能接到推送通知，Simulator 模仿器无法接到推送通知。
**测试** 

如上图所示：启动后可以看到 打印的token，复制此token
来到 firebase官网，你的账户中 点击它
 

点击 制作一个新的宣传活动-> 发送测试消息-> 添加Token

你可以在 Android模仿器/iphone 中看见它了！
即便应用不在后台进程中运行， 它依然是有效的。 

你仍然可以进行对它的扩展 比如使用  flutter_local_notifications 插件 修改进行应用内的推送结果

    启动器红点教程>>: 给Flutter + FireBase 增加 badge 徽章，App启动器 通知红点。-CSDN博客

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。