Flutter Firebase云消息传递插件firebase_cloud_messaging_interop的使用

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

Flutter Firebase云消息传递插件 firebase_cloud_messaging_interop 的使用

简介

firebase_cloud_messaging_interop 是一个 Dart 插件，用于在 Flutter Web 或 Angular Dart 项目中使用 Firebase Cloud Messaging (FCM) API。对于 Android 和 iOS 平台，请考虑使用 firebase_messaging 插件（注意这两个插件可以共存）。

开始使用

步骤 1：添加 GCM 发送者 ID 到 manifest.json

将 gcm_sender_id 添加到 manifest.json 文件中（位于 your_project/web/manifest.json）：

{
  ...
  "gcm_sender_id": "SENDER_ID",
  ...
}

确保在 index.html 文件的 <head> 标签中包含以下行：

<link rel="manifest" href="/manifest.json">

步骤 2：添加 Firebase JavaScript 库

在项目的 <head> 标签中添加 Firebase App 和 Firebase Messaging JS 库：

<!-- Make sure that 8.1.1 is still supported (latest check 11/22/2020) -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-messaging.js"></script>

然后初始化 Firebase 应用：

<script>
    let firebaseConfig = {
        apiKey: "your-api-key",
        authDomain: "PROJECT_NAME.firebaseapp.com",
        databaseURL: "https://PROJECT_NAME.firebaseio.com", 
        projectId: "PROJECT_NAME",
        storageBucket: "PROJECT_NAME.appspot.com",
        messagingSenderId: "MESSAGING_SENDER_ID",
        appId: "APP_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig); 
</script>

步骤 3：创建服务工作线程文件

创建一个名为 firebase-messaging-sw.js 的文件（位于 your_project/web/firebase-messaging-sw.js），并插入以下代码：

importScripts('https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.1.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
   apiKey: "your-api-key",
   authDomain: "PROJECT_NAME.firebaseapp.com",
   databaseURL: "https://PROJECT_NAME.firebaseio.com", 
   projectId: "PROJECT_NAME",
   storageBucket: "PROJECT_NAME.appspot.com",
   messagingSenderId: "MESSAGING_SENDER_ID",
   appId: "APP_ID"
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

使用示例

初始化 FirebaseMessagingWeb

直接初始化：

final FirebaseMessagingWeb fcm = FirebaseMessagingWeb(publicVapidKey: "yourPublicVapidKey");

延迟初始化：

final FirebaseMessagingWeb fcm = FirebaseMessagingWeb();

// Do some stuff

fcm.init("yourPublicVapidKey");

请求通知权限

final bool didGivePermissions = await fcm.requestNotificationPermissions();

if (didGivePermissions) {
  // Retrieve token
}

获取 Token

final String token = await fcm.getToken();

// post token to your server

监听 Token 刷新

fcm.onTokenRefresh(() {
  // get new token
});

监听消息

fcm.onMessage((Map messagePayload) {
  // do something with message data
});

重要提示： 你不能直接通过此插件订阅主题。你需要从服务器调用 Firebase，并使用用户的 token 来完成订阅。

完整示例 Demo

以下是完整的示例代码，展示了如何在 Flutter 中使用 firebase_cloud_messaging_interop 插件请求通知权限：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final bool didGivePermissions = await requestNotificationPermissions();
              if (didGivePermissions) {
                final String token = await getToken();
                print('Token: $token');
              }
            },
            child: Text('Request Permissions and Get Token'),
          ),
        ),
      ),
    );
  }

  Future<bool> requestNotificationPermissions() async {
    // Implement request notification permissions logic here
    return true;
  }

  Future<String> getToken() async {
    // Implement get token logic here
    return "example_token";
  }
}

更多关于Flutter Firebase云消息传递插件firebase_cloud_messaging_interop的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Firebase云消息传递插件firebase_cloud_messaging_interop的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用firebase_cloud_messaging_interop插件来实现Firebase云消息传递（FCM）功能，通常需要与Firebase的其他服务进行集成。firebase_cloud_messaging_interop是一个桥接库，它允许Flutter应用使用Firebase Cloud Messaging的原生SDK。以下是一个基本的代码案例，展示了如何在Flutter项目中配置和使用这个插件。

1. 添加依赖

首先，在pubspec.yaml文件中添加firebase_core和firebase_messaging以及firebase_cloud_messaging_interop的依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^x.y.z  # 使用最新版本号
  firebase_messaging: ^x.y.z  # 使用最新版本号
  firebase_cloud_messaging_interop: ^x.y.z  # 使用最新版本号

然后运行flutter pub get来安装这些依赖。

2. 配置Firebase

确保你的Firebase项目已经正确配置，并且在Firebase控制台中为你的应用添加了FCM支持。你还需要下载并配置google-services.json（Android）和GoogleService-Info.plist（iOS）。

3. 初始化Firebase和FCM

在你的Flutter应用的主文件中（通常是main.dart），初始化Firebase和FCM：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:firebase_cloud_messaging_interop/firebase_cloud_messaging_interop.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Firebase应用
  await Firebase.initializeApp();

  // 获取Firebase Messaging实例
  FirebaseMessaging messaging = FirebaseMessaging.instance;

  // 配置FCM
  FirebaseMessagingInterop.instance().configure(
    onMessage: (RemoteMessage message) async {
      print('A new FCM message arrived!');
      print('Message data: ${message.data}');
    },
    onBackgroundMessage: myBackgroundMessageHandler, // 需要一个顶层函数
    onMessageOpenedApp: (RemoteMessage message) {
      print('A message was opened while the app was in the background!');
      print('Message data: ${message.data}');
    },
  );

  runApp(MyApp());
}

// 顶层函数，用于处理后台消息
Future<void> myBackgroundMessageHandler(RemoteMessage message) async {
  print('Handling a background message: ${message.messageId}');
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firebase Cloud Messaging Demo'),
        ),
        body: Center(
          child: Text('Check the console for incoming FCM messages!'),
        ),
      ),
    );
  }
}

4. 处理后台消息（Android特定）

对于Android，你需要在AndroidManifest.xml中声明一个服务来处理后台消息，并且这个服务需要指向一个实现了FirebaseMessagingService的Kotlin/Java类。但是，由于firebase_cloud_messaging_interop主要是一个桥接库，通常这个步骤会由firebase_messaging插件自动处理。不过，如果你需要自定义后台消息处理，你可能需要直接在你的原生Android代码中实现。

5. iOS配置

对于iOS，确保在Info.plist中配置了FirebaseAppDelegateProxyEnabled键，并根据需要设置为YES或NO。此外，你需要在AppDelegate.swift或AppDelegate.m中配置Firebase。但是，通常firebase_messaging插件会处理大部分配置工作。

注意事项

  • firebase_cloud_messaging_interop是一个较低级别的库，通常用于需要直接访问原生Firebase SDK功能的场景。对于大多数Flutter开发者来说，firebase_messaging插件已经提供了足够的功能。
  • 确保你遵循了Firebase和Flutter的最新文档和最佳实践，因为库和API可能会随时间变化。

这个代码案例提供了一个基本的框架，展示了如何在Flutter中使用firebase_cloud_messaging_interop来配置和接收Firebase Cloud Messaging消息。根据你的具体需求，你可能需要进一步自定义和扩展这个代码。

回到顶部