如何使用Firebase在Flutter中设置Firebase云消息传递

发布时间 2023-07-08 08:18:22作者: 晓风晓浪

在当今竞争激烈的移动应用程序环境中,有效吸引应用程序用户并提供及时信息是关键。

Firebase Cloud Messaging (FCM) 是 Firebase 提供的一项功能强大的推送通知服务。它提供了一种与应用程序用户联系并保持他们参与的无缝方式。

在本教程中,我们将深入研究 FCM 在 Flutter 中的集成。我们将探讨它的好处并展示它如何增强用户参与度和提高应用程序性能的现实示例。

(更|多优质内|容:java567 点 c0m)

 

什么是 Firebase 云消息传递?

Firebase 云消息传递 (FCM) 在您的服务器和设备之间提供可靠且省电的连接。它允许您免费在 iOS、Android 和 Web 上发送和接收消息和通知。

在本教程中,我们将探索在 Flutter 中使用 Firebase 作为后端服务设置和使用 Firebase Cloud Messaging (FCM) 的过程。虽然主要关注点是 Android 实现,但值得注意的是,iOS 和 Android 的过程类似(有一些配置差异)。

我们将介绍以下内容:

  1. 如何在 Firebase 中创建应用

  2. 如何在 Flutter 中设置 Firebase

  3. 如何使用 FCM 令牌实现推送通知

在本教程中,您将学习如何使用 Firebase 向 Flutter 中运行的应用发送简单的通知。让我们开始吧。

如何在 Firebase 中创建应用程序

我将在 Firebase 控制台中创建一个新项目来开始。我将逐步完成必要的步骤,包括项目设置、如何配置 Firebase Cloud Messaging,以及如何获取 Flutter 应用所需的凭据和配置文件。

如果您没有帐户,则在创建应用程序之前,您需要注册 Firebase控制台。注册后,尝试创建一个项目。

在 Firebase 中创建项目

创建项目需要一些时间。

在 Firebase 中创建项目

创建项目后,它将重定向到项目仪表板。

Firebase 控制台中的项目概述

在 Firebase 控制台中创建项目后,就可以开始使用我们的 Flutter 应用程序了。

如何在 Flutter 中设置 Firebase

我使用 Visual Studio Code 创建了一个简单的 Flutter 项目。如果你对构建Flutter项目不熟悉,可以参考我之前的教程。(如果您已经熟悉,可以跳过此步骤。)

在 Android 设备上运行的简单 Flutter 应用程序

让我们将 Firebase 集成到我们的 Flutter 项目中。为此,我们需要一个 Firebase CLI 命令行工具。我已经安装了 Firebase CLI。如果你还没有这样做,可以参考官方文档。

然后我们需要使用 Firebase CLI 登录 Firebase。

 firebase login

使用 FirebaseCLI 登录 Firebase 的命令

使用 FirebaseCLI 登录 Firebase

这将导航到浏览器以登录 Firebase。身份验证成功完成后,您将被导航回来。

登录成功后,我们需要安装FlutterFire CLI。我们可以使用 FlutterFire CLI 来配置 Flutter 应用程序以连接到 Firebase。运行以下命令激活 FlutterFire CLI:

 dart pub global activate flutterfire_cli

安装 FlutterFire 的命令

FlutterFire CLI 是一个命令行界面工具,可简化将 Firebase 服务集成到 Flutter 应用程序中的过程。它提供了一种在 Flutter 项目中添加、配置和管理 Firebase 插件的便捷方法。

安装 FlutterFireCLI

下一步是将firebase_core库添加到我们的 Flutter 项目中。

以下命令将自动将该firebase_core包添加为项目pubspec.yaml文件中的依赖项,并从pub.dev. 运行此命令后,您可以将firebase_core包导入到 Dart 文件中并在我们的 Flutter 应用程序中使用 Firebase 服务。

 flutter pub add firebase_core

安装 Firebase Core 的命令

安装 Firebase 核心包

该flutterfire configure命令用于使用 FlutterFire CLI 在我们的 Flutter 项目中配置 Firebase 服务。此命令可帮助我们轻松高效地设置 Firebase 身份验证、Firestore、云消息传递和其他 Firebase 服务。

 flutterfire configure

将 Firebase 配置到 Flutter App 中的命令

第一步是选择项目,

将 Flutter 应用程序与 Firebase 应用程序连接

接下来就是选择平台了。我这里用的是Android,所以选择Android。

选择平台

配置成功后,会显示Firebase App Id。

最后,我们需要向main.dart文件中添加一些代码更改。

导入以下包:

 import 'package:firebase_core/firebase_core.dart';
 import 'firebase_options.dart';

导入 firebase 包

添加以下配置以在文件的 main 函数内初始化 Firebase 配置main.dart。

 await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
 );

在 Flutter App 中初始化 firebase

好的,我们已经成功完成了 Flutter 应用中的 Firebase 配置!让我们花点时间庆祝这一里程碑。配置 Firebase 服务是构建强大且功能丰富的应用程序的关键一步。

如何使用 FCM 令牌实现推送通知

我们将实现注册设备以接收推送通知并检索分配给每个设备的唯一 FCM 令牌的过程。此步骤对于向特定设备发送有针对性的通知至关重要。

我们将深入研究使用 Firebase Cloud Messaging 向设备发送推送通知的实现。我们将探索如何从 Firebase 控制台构建和发送通知消息,并演示如何在 Flutter 应用中处理这些消息。

 flutter pub add firebase_messaging

安装firebse消息包的命令

安装firebse消息包

接下来,我们需要触发该setAutoInitEnabled函数以在 Flutter 应用中启用 Firebase Cloud Messaging (FCM) 的自动初始化。这意味着 FCM 将在应用程序启动时自动初始化并检索设备令牌。

在方法中添加以下函数调用main:

 import 'package:firebase_messaging/firebase_messaging.dart';
 ...
 ...
 await FirebaseMessaging.instance.setAutoInitEnabled(true);

Flutter 代码实现 FCM 自动初始化

让我们运行 Flutter 应用程序并验证是否收到通知。

导航到 Firebase消息控制台。由于这是我们的第一条消息,我们需要选择“创建您的第一个营销活动”。选择“Firebase 通知消息”并单击“创建”。

示例测试消息模板

现在我们需要输入消息的通知标题、文本和名称。

然后我们可以使用下面的代码手动获取 FCM 令牌以进行测试。要检索应用程序实例的当前注册令牌,请调用getToken()该main()方法。如果未授予通知权限,此方法将询问用户通知权限。否则,如果有任何错误,它会返回一个令牌或拒绝。

 final fcmToken = await FirebaseMessaging.instance.getToken();
 log("FCMToken $fcmToken");

获取 FCM 令牌的代码

复制控制台上打印的 FCM 令牌并将其粘贴到“添加 FCM 注册令牌”输入框中。

使用 FCM 令牌发送测试消息

单击“测试”按钮。目标客户端设备(应用程序在后台)应该收到通知。

Android 设备收到推送通知

欢呼!我们在 Android 设备上收到了通知。如果我们点击通知,它会默认打开应用程序。

当我们点击通知时,Android 和 iOS 上的默认行为都是打开应用程序。如果应用程序终止,它将启动。如果它在后台,它将被带到前台。

在这里,我们可以看到初始化 Firebase 消息传递的基本配置。

 main.dart
 import 'package:flutter/material.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_messaging/firebase_messaging.dart';
 import 'firebase_options.dart';
 
 void main() async {
  runApp(const MyApp());
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  final fcmToken = await FirebaseMessaging.instance.getToken();
  await FirebaseMessaging.instance.setAutoInitEnabled(true);
  log("FCMToken $fcmToken");
 }

Firebase Messaging 基本配置的完整代码

结论

在本教程中,我们介绍了使用 Firebase 云消息传递 (FCM) 在 Flutter 中实现推送通知的基本步骤。

通过遵循概述的步骤,您可以设置 Firebase,将其集成到您的 Flutter 项目中,并实现推送通知功能。

通过无缝发送和接收通知的能力,您可以增强用户体验并有效地与应用程序的用户互动。请继续关注未来教程中的更多高级主题和功能。

(更|多优质内|容:java567 点 c0m)