Gửi và nhận thông báo cho ứng dụng Flutter bằng cách sử dụng Firebase Cloud Messaging

1. Giới thiệu

Cập nhật lần cuối : 2022-04-04

Lớp học lập trình này hướng dẫn bạn quy trình phát triển ứng dụng đa nền tảng với Nhắn tin qua đám mây Firebase (FCM) bằng Flutter. Bạn sẽ viết một phần quá trình triển khai ứng dụng, sau đó xây dựng và chạy ứng dụng đó một cách liền mạch trên ba nền tảng: Android, iOS và web. Bạn cũng sẽ tìm hiểu cách tích hợp FCM trong Flutter và cách viết mã để nhận và gửi tin nhắn. Cuối cùng, lớp học lập trình này giới thiệu tính năng chặn dành riêng cho nền tảng của API FCM HTTP v1, cho phép bạn gửi một tin nhắn có hành vi khác nhau trên các nền tảng khác nhau.

Điều kiện tiên quyết

Hiểu biết cơ bản về Flutter.

Bạn sẽ học được gì

  • Cách thiết lập và tạo ứng dụng Flutter.
  • Cách thêm phụ thuộc FCM.
  • Cách gửi tin nhắn FCM đơn lẻ tới ứng dụng của bạn.
  • Cách gửi tin nhắn FCM theo chủ đề tới ứng dụng của bạn.

Những gì bạn cần

  • Phiên bản ổn định mới nhất của Android Studio được định cấu hình với plugin Dart và Flutter.

Bạn có thể chạy lớp học lập trình bằng bất kỳ thiết bị nào sau đây:

Theo tùy chọn, để chạy lớp học lập trình bằng nền tảng iOS, bạn cần có thiết bị iOS, tài khoản Nhà phát triển Apple và thiết bị macOS đã cài đặt XCode.

2. Thiết lập rung

Nếu bạn đã thiết lập môi trường phát triển Flutter, hãy bỏ qua phần này.

Để thiết lập môi trường phát triển Flutter, hãy làm theo các bước sau:

  1. Tải xuống và cài đặt Flutter cho hệ điều hành của bạn: Cài đặt | Chớp cánh
  2. Đảm bảo rằng công cụ Flutter được thêm vào đường dẫn của bạn.
  3. Thiết lập trình soạn thảo của bạn cho Flutter như trong Thiết lập trình chỉnh sửa | Flutter Đảm bảo cài đặt plugin Flutter và Dart cho trình soạn thảo của bạn. Đối với phần còn lại của lớp học lập trình, bạn sẽ sử dụng Android Studio.
  4. Từ dòng lệnh, hãy chạy flutter doctor để quét qua thiết lập của bạn và liệt kê mọi phần phụ thuộc bị thiếu cần được sửa. Làm theo hướng dẫn để khắc phục mọi phần phụ thuộc quan trọng bị thiếu. Lưu ý rằng một số phụ thuộc có thể không cần thiết. Ví dụ: nếu bạn không định phát triển cho iOS thì phần phụ thuộc CocoaPods bị thiếu sẽ không phải là vấn đề gây cản trở.
  5. Chạy lệnh này để tạo ứng dụng Flutter của bạn trong thư mục fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter , sau đó thay đổi thư mục thành fcmflutter .
  1. Trong Android Studio, đi tới File -> Open , tìm đường dẫn ứng dụng Flutter của bạn rồi nhấp vào Open để mở dự án trong Android Studio. Mã ứng dụng nằm trong file lib/main.dart .

Trên thanh công cụ Android Studio, nhấp vào mũi tên Xuống để chọn thiết bị Android. Nếu bộ chọn mục tiêu trống, hãy cài đặt thiết bị Android ảo hoặc trình duyệt Chrome hoặc trình mô phỏng iOS nếu bạn muốn khởi chạy ứng dụng từ trình duyệt web hoặc thiết bị iOS. Bạn có thể cần khởi chạy thiết bị theo cách thủ công và làm mới danh sách để tìm thiết bị mục tiêu.

Thanh công cụ của Android Studio với mũi tên thả xuống của menu mục tiêu xây dựng được làm nổi bật.

Bấm chạy Nút chạy trong Android Studio để khởi chạy ứng dụng.

Giao diện người dùng của ứng dụng demo Flutter đã ra mắt

Chúc mừng! Bạn đã tạo thành công ứng dụng Flutter.

3. Thiết lập Firebase và FlutterFire

Để phát triển một ứng dụng tích hợp với Firebase Cloud Messaging bằng Flutter, bạn cần:

  • Một dự án Firebase.
  • CLI Firebase đang hoạt động.
  • Cài đặt FlutterFire.
  • Một ứng dụng được định cấu hình và tạo bằng flutterfire configure .

Tạo dự án Firebase của bạn

Nếu bạn đã có dự án Firebase, bạn có thể bỏ qua bước này.

  1. Nếu bạn có Tài khoản Google, hãy mở Firebase và đăng nhập bằng Tài khoản Google của bạn, sau đó nhấp vào Chuyển đến bảng điều khiển .
  2. Trong Bảng điều khiển Firebase, nhấp vào Thêm dự án . Làm theo hướng dẫn để tạo một dự án. Không chọn Bật Google Analytics cho dự án này vì bạn sẽ không sử dụng nó trong dự án này.
  3. Sau khi dự án được tạo, hãy điều hướng đến Cài đặt dự án của dự án bằng cách nhấp vào biểu tượng bánh răng bên cạnh Tổng quan dự án .

Ảnh chụp màn hình đã cắt của Bảng điều khiển Firebase làm nổi bật biểu tượng cho menu cài đặt dự án và

ID dự án được sử dụng để nhận dạng duy nhất dự án và nó có thể khác với tên Dự án . ID dự án sẽ được sử dụng để thiết lập FlutterFire sau này.

Ảnh chụp màn hình đã cắt của Bảng điều khiển Firebase làm nổi bật id dự án

Chúc mừng! Bạn đã tạo thành công dự án Firebase.

Thiết lập CLI Firebase

Nếu bạn đã thiết lập Firebase CLI, bạn có thể bỏ qua bước này.

Đi tới phần tham khảo Firebase CLI để tải xuống và cài đặt Firebase CLI. Đăng nhập vào Firebase bằng Tài khoản Google của bạn bằng lệnh sau:

firebase login

Thiết lập FlutterFire

  1. Cài đặt plugin FlutterFire bằng lệnh: flutter pub add firebase_core
  2. Cài đặt plugin FCM: flutter pub add firebase_messaging
  3. Thiết lập FlutterFire CLI: dart pub global activate flutterfire_cli
  4. Định cấu hình dự án Firebase trên Flutter: flutterfire configure --project=fcm4flutter. Sử dụng các phím mũi tên và dấu cách để chọn nền tảng hoặc nhấn Enter để sử dụng nền tảng mặc định.

Lớp học lập trình này sử dụng các nền tảng mặc định (Android, iOS và web), nhưng bạn chỉ có thể chọn một hoặc hai nền tảng. Nếu được nhắc nhập ID gói iOS, hãy nhập com.flutter.fcm.fcmflutter hoặc ID gói iOS của riêng bạn ở định dạng [company domain name].[project name] . Sau khi lệnh hoàn thành, hãy làm mới trang Bảng điều khiển Firebase. Bạn sẽ thấy rằng nó đã tạo ứng dụng cho các nền tảng đã chọn trong dự án Firebase.

Ảnh chụp màn hình đã cắt của Bảng điều khiển Firebase hiển thị các ứng dụng đã tạo cho các nền tảng đã chọn

Lệnh này tạo tệp firebase_options.dart trong thư mục lib , chứa tất cả các tùy chọn cần thiết để khởi tạo.

Thiết lập Nhắn tin qua đám mây cho iOS

  1. Điều hướng đến trang dành cho nhà phát triển Apple và nhấp vào Tạo khóa trên tab Khóa .

Ảnh chụp màn hình bị cắt của trang dành cho nhà phát triển Apple làm nổi bật các thành phần của trang để tạo khóa

  1. Nhập tên cho key và kiểm tra Apple Push notification services (APN) . Ảnh chụp màn hình bị cắt của trang dành cho nhà phát triển Apple làm nổi bật hộp văn bản cho tên khóa mới
  2. Tải xuống tệp khóa có phần mở rộng tệp .p8 . Ảnh chụp màn hình bị cắt của trang dành cho nhà phát triển Apple làm nổi bật nút tải xuống khóa
  3. Trong bảng điều khiển Firebase , điều hướng đến Cài đặt dự án của dự án và chọn tab Nhắn tin qua đám mây .

Ảnh chụp màn hình bị cắt của trang Bảng điều khiển Firebase làm nổi bật các thành phần để cập nhật cài đặt dự án

Ảnh chụp màn hình đã cắt của trang Bảng điều khiển Firebase làm nổi bật tab Nhắn tin qua đám mây

  1. Tải tệp khóa APN lên cho ứng dụng iOS trong tab Nhắn tin qua đám mây . Nhập ID khóa APN từ tab Nhắn tin qua đám mây và ID nhóm, bạn có thể tìm thấy ID này trong trung tâm thành viên Apple. Ảnh chụp màn hình bị cắt của trang Bảng điều khiển Firebase làm nổi bật các nút để tải Khóa xác thực APN lên

4. Chuẩn bị FCM

Trước khi một ứng dụng có thể nhận tin nhắn từ FCM, ứng dụng đó cần phải:

  • Khởi tạo FlutterFire.
  • Yêu cầu quyền thông báo.
  • Đăng ký với FCM để nhận mã thông báo đăng ký.

Khởi tạo

Để khởi tạo dịch vụ, hãy thay thế hàm main ( lib/main.dart ) bằng mã này:

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 
flutterfire configure
import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

Sau đó chạy Tools -> Flutter -> Flutter Pub Vào Android Studio để tải các gói được thêm vào tại Set up FlutterFire và hiển thị mã với cài đặt Intellisense thích hợp trong Android Studio.

Điều này khởi tạo FlutterFire cho nền tảng hiện tại DefaultFirebaseOptions.currentPlatform , được nhập từ tệp firebase_options.dart được tạo. Lưu ý rằng initializeApp là một hàm không đồng bộ và từ khóa await đảm bảo quá trình khởi tạo hoàn tất trước khi chạy ứng dụng.

Xin phep

Ứng dụng cần xin phép người dùng để nhận thông báo. Phương thức requestPermission do firebase_messaging cung cấp hiển thị hộp thoại hoặc cửa sổ bật lên nhắc người dùng cho phép hoặc từ chối quyền.

Đầu tiên các bạn copy đoạn code này vào hàm main dưới phần bình luận TODO: Request permission . settings được trả về sẽ cho bạn biết liệu người dùng đã cấp quyền hay chưa. Chúng tôi khuyên bạn chỉ nên yêu cầu quyền khi người dùng cần sử dụng một tính năng yêu cầu quyền truy cập (ví dụ: khi người dùng bật thông báo trong cài đặt ứng dụng). Trong lớp học lập trình này, chúng tôi yêu cầu quyền khởi động ứng dụng để đơn giản hóa.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

Tiếp theo, trên thanh công cụ của Android Studio, chọn Chrome (web) từ bộ chọn mục tiêu rồi chạy lại ứng dụng.

Ảnh chụp màn hình đã cắt của thanh công cụ Android Studio với bộ chọn mục tiêu và nút Chạy

Sau đó, tab Chrome sẽ khởi chạy với cửa sổ bật lên yêu cầu quyền. Nếu nhấp vào Allow , bạn sẽ thấy nhật ký trong bảng điều khiển Android Studio: Permission granted: AuthorizationStatus.authorized . Sau khi bạn cho phép hoặc chặn yêu cầu cấp quyền, phản hồi của bạn sẽ được lưu trữ cùng với ứng dụng của bạn trong trình duyệt và cửa sổ bật lên sẽ không hiển thị lại. Xin lưu ý rằng khi chạy lại ứng dụng web trên Android Studio, bạn có thể được nhắc cấp lại quyền. Ảnh chụp màn hình bị cắt của tab Chrome có cửa sổ bật lên yêu cầu

Sự đăng ký

Copy đoạn mã này vào chức năng chính bên dưới bình luận TODO: Register with FCM để đăng ký với FCM. Lệnh gọi getToken trả về mã thông báo đăng ký có thể được máy chủ ứng dụng hoặc môi trường máy chủ đáng tin cậy sử dụng để gửi tin nhắn cho người dùng.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

Trên thanh công cụ Android Studio, chọn thiết bị Android và chạy ứng dụng. Trong bảng điều khiển Android Studio, mã thông báo đăng ký được in ra như sau:

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

Sao chép nó vào trình soạn thảo văn bản vì bạn sẽ sử dụng nó để gửi tin nhắn sau này.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

Các bước bổ sung để nhận tin nhắn trên web

Ứng dụng web cần thêm hai bước để nhận mã thông báo đăng ký và nghe tin nhắn đến. Web cần chuyển khóa VAPID tới getToken để ủy quyền gửi yêu cầu tới các dịch vụ đẩy web được hỗ trợ.

Đầu tiên, hãy mở tab Nhắn tin qua đám mây của dự án Firebase trong Bảng điều khiển Firebase, cuộn xuống phần Cấu hình web để tìm cặp khóa hiện có hoặc tạo cặp khóa mới. Nhấp vào nút được đánh dấu để sao chép khóa để có thể sử dụng nó làm vapidKey.

Ảnh chụp màn hình bị cắt của thành phần Chứng chỉ đẩy Web của trang cấu hình Web làm nổi bật cặp khóa

Tiếp theo thay mã đăng ký ở phần Đăng ký bằng mã này rồi cập nhật vapidKey:

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

Sau đó, tạo tệp firebase-messaging-sw.js bên dưới thư mục web/ trong thư mục gốc của dự án của bạn. Sao chép phần sau vào firebase-messaging-sw.js để cho phép ứng dụng web nhận các sự kiện onMessage . Xem Đặt tùy chọn thông báo trong nhân viên dịch vụ để biết thêm thông tin.

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

Sau đó, trong tab Cài đặt dự án -> tab Chung , cuộn xuống và tìm Web App , sao chép phần mã firebaseConfig và dán vào firebase-messaging-sw.js . Ảnh chụp màn hình đã cắt của thành phần Ứng dụng web của trang cấu hình Firebase

Cuối cùng, trên thanh công cụ Android Studio, chọn Chrome (web) trong bộ chọn mục tiêu và chạy ứng dụng. Trong bảng điều khiển Android Studio, mã thông báo đăng ký được in ra như sau:

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

Sao chép mã thông báo đăng ký vào trình soạn thảo văn bản để bạn có thể sử dụng nó để gửi tin nhắn sau này.

Các bước bổ sung để nhận tin nhắn trên iOS

Để nhận tin nhắn từ FCM, thiết bị iOS cần bật Thông báo đẩyChế độ nền trên Xcode:

  1. Trong Android Studio, nhấp chuột phải vào tên dự án rồi chọn Flutter -> Open iOS module in Xcode . Ảnh chụp màn hình đã được cắt của
  2. Sau khi Xcode khởi chạy, hãy bật Thông báo đẩyChế độ nền trong tab Ký kết & Khả năng cho mục tiêu dự án. Xem Định cấu hình ứng dụng của bạn để biết thêm thông tin.
  3. Trên thanh công cụ Android Studio, chọn thiết bị iOS trong bộ chọn mục tiêu và chạy ứng dụng. Sau khi cấp quyền thông báo, mã thông báo đăng ký sẽ được in trong bảng điều khiển Android Studio.

Ảnh chụp màn hình bị cắt của một ứng dụng iOS yêu cầu quyền gửi thông báo

Xin chúc mừng, bạn đã đăng ký thành công ứng dụng của mình với FCM. Bạn đã sẵn sàng nhận tin nhắn, như được mô tả trong phần tiếp theo.

5. Nhận tin nhắn từ FCM

Thiết lập trình xử lý tin nhắn

Ứng dụng cần xử lý các sự kiện onMessage khi có tin nhắn đến trong khi ứng dụng ở chế độ nền trước và các sự kiện onBackgroundMessage khi ứng dụng ở chế độ nền.

Trình xử lý tin nhắn tiền cảnh

Trước tiên, hãy thêm bộ điều khiển luồng sau nhận xét TODO: Add stream controller trong tệp main.dart để chuyển thông báo từ trình xử lý sự kiện đến giao diện người dùng.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

Để thêm phần phụ thuộc rxdart, hãy chạy lệnh này từ thư mục dự án: flutter pub add rxdart .

Tiếp theo, chạy Tools -> Flutter -> Flutter Pub Truy cập Android Studio để tải gói rxdart.dart và hiển thị mã với cài đặt Intellisense thích hợp trong Android Studio.

Sau đó, thêm trình xử lý sự kiện để nghe các tin nhắn trên nền trước sau nhận xét TODO: Set up foreground message handler . Nó in nhật ký và xuất bản thông báo tới bộ điều khiển luồng.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

Sau đó, thay thế tiện ích Trạng thái ban đầu trong tệp main.dart bằng mã này. Mã này sẽ thêm người đăng ký vào bộ điều khiển luồng trong tiện ích Trạng thái và hiển thị thông báo cuối cùng trên tiện ích.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Trình xử lý tin nhắn nền cho Android/iOS

Tin nhắn được xử lý bởi trình xử lý onBackgroundMessage trong khi ứng dụng ở chế độ nền. Trình xử lý phải là hàm cấp cao nhất. Giao diện người dùng có thể được cập nhật khi ứng dụng được đưa lên nền trước bằng cách xử lý thông báo (xem Xử lý tương tác ) hoặc đồng bộ hóa với máy chủ ứng dụng.

Tạo hàm xử lý sau bình luận TODO: Define the background message handler bên ngoài hàm chính và gọi nó trong hàm chính sau bình luận TODO: Set up background message handler .

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

Trình xử lý tin nhắn nền cho web

Kể từ FlutterFire firebase_messaging phiên bản 11.2.8, việc xử lý tin nhắn nền trên nền tảng dựa trên web yêu cầu một quy trình khác. Do đó, bạn cần thêm một trình xử lý tin nhắn riêng trong service worker web/firebase-messaging-sw.js .

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

Thiết lập máy chủ ứng dụng

  1. Nhập mã máy chủ khởi động bằng cách mở dự án https://github.com/FirebaseExtends/firebase_fcm_flutter/tree/main/server trong Android Studio. Máy chủ này là một dự án Java dựa trên Gradle phụ thuộc vào SDK quản trị firebase , cung cấp chức năng gửi tin nhắn FCM.
  2. Thiết lập Tài khoản dịch vụ Firebase cho phép SDK quản trị Firebase ủy quyền các lệnh gọi tới API FCM. Mở Cài đặt dự án trong bảng điều khiển Firebase và chọn tab Tài khoản dịch vụ . Chọn 'Java' và nhấp vào Generate new private key để tải xuống đoạn cấu hình. Ảnh chụp màn hình bị cắt làm nổi bật đoạn cấu hình SDK quản trị của thành phần Tài khoản dịch vụ trên trang Cài đặt dự án
  3. Đổi tên tệp thành service-account.json và sao chép nó vào đường dẫn src/main/resources của dự án máy chủ.

Gửi tin nhắn thử nghiệm

Trong tệp FcmSender.java , sendMessageToFcmRegistrationToken soạn tin nhắn thông báo có tải trọng dữ liệu. Mã thông báo đăng ký nhắm mục tiêu phiên bản ứng dụng mà tin nhắn được gửi tới.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }
  1. Sao chép mã thông báo đăng ký Android được sao chép từ phần Đăng ký và dán mã đó vào giá trị cho biến registrationToken .
  2. Bấm chạy Nút chạy trong Android Studio để chạy chức năng chính và gửi tin nhắn tới người dùng thông qua FCM. Ảnh chụp màn hình đã cắt của biểu tượng Chạy hiển thị bên cạnh chức năng chính FcmSender.java trong Android Studio

Khi ứng dụng Android ở chế độ nền, thông báo sẽ xuất hiện trong khay thông báo.

Ảnh chụp màn hình đã cắt của thông báo xuất hiện trong khay thông báo của Android

Khi ứng dụng Android chạy ở nền trước, bạn sẽ thấy nhật ký trong bảng điều khiển Android Studio: "Xử lý thông báo trên nền trước". Nội dung tin nhắn cũng được hiển thị trong giao diện người dùng vì giao diện người dùng được đăng ký với bộ điều khiển luồng cho tin nhắn mới.

Ảnh chụp màn hình đã cắt nội dung tin nhắn hiển thị trong ứng dụng Android

Nếu bạn dán mã thông báo đăng ký và gửi tin nhắn từ máy chủ ứng dụng hoặc môi trường máy chủ đáng tin cậy khác, bạn sẽ thấy hành vi tương tự:

  • Khi ứng dụng web chạy ở chế độ nền (tức là khi ứng dụng này bị ẩn bởi một cửa sổ khác hoặc một tab khác đang hoạt động), bạn sẽ thấy thông báo web.

Ảnh chụp màn hình đã cắt của thông báo web hiển thị trong trình duyệt Chrome

  • Khi ứng dụng web chạy ở nền trước, bạn có thể xem nhật ký trong Chrome Console bằng cách nhấp chuột phải vào trang web và chọn Inspect . Nội dung tin nhắn cũng được hiển thị trong giao diện người dùng. Ảnh chụp màn hình đã cắt của Chrome Console kèm theo nhật ký gỡ lỗi

6. Gửi tin nhắn chủ đề

Tính năng ghi đè nền tảng của API FCM HTTP v1 cho phép yêu cầu gửi tin nhắn có các hành vi khác nhau trên các nền tảng khác nhau. Một trường hợp sử dụng của tính năng này là hiển thị nội dung tin nhắn thông báo khác nhau dựa trên nền tảng. Tính năng này được sử dụng đầy đủ nhất khi nhắm mục tiêu đến nhiều thiết bị (có thể trải rộng trên nhiều nền tảng) bằng tin nhắn theo chủ đề. Phần này sẽ hướng dẫn bạn các bước để giúp ứng dụng của bạn nhận được thông báo chủ đề được tùy chỉnh cho từng nền tảng.

Đăng ký một chủ đề từ khách hàng

Để đăng ký một chủ đề, hãy gọi phương thức messaging.subscribeToTopic ở cuối hàm main trong tệp main.dart của ứng dụng Flutter.

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[Tùy chọn] Đăng ký chủ đề từ máy chủ dành cho web

Bạn có thể bỏ qua phần này nếu bạn không phát triển trên nền tảng web.

SDK FCM JS hiện không hỗ trợ đăng ký chủ đề phía máy khách. Thay vào đó, bạn có thể đăng ký bằng API quản lý chủ đề phía máy chủ của SDK quản trị. Mã này minh họa việc đăng ký chủ đề phía máy chủ bằng SDK quản trị Java.

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

Mở máy chủ ứng dụng và nhấp vào Chạy Nút chạy trong Android Studio để chạy chức năng chính trong tệp FcmSubscriptionManager.java :

Ảnh chụp màn hình đã cắt của biểu tượng Chạy hiển thị bên cạnh chức năng chính FcmSubscriptionManager.java trong Android Studio

Gửi tin nhắn có ghi đè nền tảng tới một chủ đề

Bây giờ bạn đã sẵn sàng gửi tin nhắn ghi đè nền tảng chủ đề. Trong đoạn mã sau:

  • Bạn tạo một yêu cầu gửi với thông báo cơ bản và tiêu đề " A new app is available ".
  • Thông báo tạo thông báo hiển thị với tiêu đề " A new app is available " trên nền tảng iOS và web.
  • Thông báo tạo thông báo hiển thị với tiêu đề " A new Android app is available " trên thiết bị Android.
private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

Trong chức năng chính của tệp FcmSender.java , bỏ ghi chú sendMessageToFcmTopic(); . Bấm chạy Nút chạy trong Android Studio để gửi tin nhắn chủ đề.

7. Tóm tắt và những gì tiếp theo

Tóm lại, bạn đã tìm hiểu về cách tương tác với việc phát triển ứng dụng đa nền tảng bằng Flutter và FCM, bao gồm thiết lập môi trường, tích hợp phần phụ thuộc cũng như nhận và gửi tin nhắn. Để tìm hiểu sâu hơn, hãy xem các tài liệu sau:

Lớp học lập trình

Người giới thiệu