Flutter Web端消息推送插件firebase_messaging_web的使用

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

Flutter Web端消息推送插件firebase_messaging_web的使用

firebase_messaging_web

firebase_messaging_web是firebase_messaging的Web实现，用于在Flutter Web项目中集成Firebase Cloud Messaging（FCM）功能。通过这个插件，开发者可以在Web平台上接收和处理来自Firebase的消息推送。

开始使用

要开始使用Cloud Messaging Web，请参考官方文档进行配置和集成。有关Firebase Cloud Messaging的更多信息，请访问Firebase网站。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter Web项目中使用firebase_messaging_web插件来接收和处理消息推送：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_messaging: latest_version

2. 初始化Firebase

在项目的入口文件（如main.dart）中初始化Firebase：

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

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

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

3. 设置消息监听

在主页面中设置消息监听器，以便接收和处理消息：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  String? _messageTitle;
  String? _messageBody;

  @override
  void initState() {
    super.initState();
    _configureFirebaseMessaging();
  }

  void _configureFirebaseMessaging() {
    // 请求通知权限
    _firebaseMessaging.requestPermission();

    // 监听前台消息
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      setState(() {
        _messageTitle = message.notification?.title;
        _messageBody = message.notification?.body;
      });
      print('Received a foreground message: ${message.notification?.title}/${message.notification?.body}');
    });

    // 监听后台消息
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

    // 监听点击通知
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('A new onMessageOpenedApp event was published!');
      Navigator.pushNamed(context, '/message', arguments: MessageArguments(message, true));
    });
  }

  static Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
    print("Handling a background message: ${message.messageId}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web FCM Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Received Message Title: $_messageTitle'),
            Text('Received Message Body: $_messageBody'),
          ],
        ),
      ),
    );
  }
}

class MessageArguments {
  final RemoteMessage message;
  final bool tap;

  MessageArguments(this.message, this.tap);
}

4. 配置Firebase项目

确保已经在Firebase控制台中创建了Web应用，并将生成的配置信息添加到Flutter项目的web/index.html文件中：

<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js"></script>

<script>
  var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

通过以上步骤，您就可以在Flutter Web项目中成功集成并使用firebase_messaging_web插件来实现消息推送功能。希望这些信息对您有所帮助！如果有任何问题，欢迎继续讨论。


更多关于Flutter Web端消息推送插件firebase_messaging_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Web端消息推送插件firebase_messaging_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter Web端实现消息推送功能，可以使用firebase_messaging_web插件。下面是一个示例，展示如何在Flutter Web应用中集成和使用firebase_messaging_web进行消息推送。

步骤一：添加依赖

首先，在pubspec.yaml文件中添加firebase_core、firebase_messaging和firebase_messaging_web的依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.13.0  # 请检查最新版本
  firebase_messaging: ^11.2.5  # 请检查最新版本

dependency_overrides:
  firebase_messaging_web: ^2.2.8  # 请检查最新版本，并确保与firebase_messaging版本兼容

步骤二：配置Firebase项目

  1. 在Firebase控制台创建一个新的Web应用。
  2. 下载生成的firebase-web-app.json文件，并将其放置在你的Flutter项目的web目录下。
  3. 确保在index.html文件中包含了Firebase SDK的脚本标签，这通常由FlutterFire自动处理，但你可以手动检查。

步骤三：初始化Firebase和Firebase Messaging

在你的Flutter项目的lib目录下创建一个新的Dart文件，例如firebase_options.dart，用于配置Firebase：

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

// 从firebase-web-app.json文件获取的配置信息
const FirebaseOptions firebaseOptions = FirebaseOptions(
  apiKey: "YOUR_API_KEY",
  appId: "YOUR_APP_ID",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  projectId: "YOUR_PROJECT_ID",
  authDomain: "YOUR_AUTH_DOMAIN",
);

在你的主文件（例如main.dart）中初始化Firebase并配置Firebase Messaging：

// 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 {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: firebaseOptions);

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

  // 配置消息处理
  NotificationSettings settings = await messaging.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    sound: true,
  );

  if (settings.alert) {
    // 监听消息到达事件
    messaging.onMessage.listen((RemoteMessage message) {
      print('A new FCM message arrived!');
      print('Message data: ${message.data}');
    });

    // 监听点击消息事件
    messaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('A user clicked on a FCM message!');
      print('Message data: ${message.data}');
    });
  }

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Web Firebase Messaging'),
        ),
        body: Center(
          child: Text('Firebase Messaging is initialized!'),
        ),
      ),
    );
  }
}

步骤四：处理后台消息（可选）

对于Web应用，处理后台消息稍微复杂一些，因为Web应用通常不会在后台运行。不过，你可以通过Service Worker来接收后台消息。在web/index.html中，你需要注册一个Service Worker来处理消息：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flutter Web App</title>
  <script src="/__/firebase/8.6.8/firebase-app.js"></script>
  <script src="/__/firebase/8.6.8/firebase-messaging.js"></script>
  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    const messaging = firebase.messaging();

    messaging.onBackgroundMessage(function(payload) {
      console.log('[firebase-messaging-sw.js] Received background message ', payload);
      // Customize notification here
      const notificationTitle = 'Background Message Title';
      const notificationOptions = {
        body: 'Background message body.',
        icon: '/firebase-logo.png'
      };

      return self.registration.showNotification(notificationTitle,
        notificationOptions);
    });
  </script>
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

请注意，由于Web平台的限制，后台消息处理与移动平台有所不同，并且需要更多的配置。

以上代码提供了一个基本的框架，展示了如何在Flutter Web应用中集成和使用firebase_messaging_web进行消息推送。你可能需要根据具体需求进行进一步的定制和调整。

回到顶部