Gửi và nhận thông báo cho một ứng dụng Flutter bằng Giải pháp gửi và nhận thông báo qua đám mây của Firebase

1. Giới thiệu

Lần cập nhật gần đây nhất: 04/04/2022

Lớp học lập trình này sẽ hướng dẫn bạn quy trình phát triển một ứng dụng đa nền tảng có Giải pháp gửi thông báo qua đám mây của Firebase (FCM) bằng Flutter. Bạn sẽ viết một phần triển khai ứng dụng, sau đó tạo 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 API FCM HTTP v1. Tính năng này cho phép bạn gửi một thông báo 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

Có kiến thức cơ bản về Flutter.

Kiến thức bạn sẽ học được

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

Bạn cần có

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

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

• Một thiết bị Android thực kết nối với máy tính của bạn.
• Trình mô phỏng Android (xem phần Chạy ứng dụng trên Trình mô phỏng Android).
• Một trình duyệt bạn chọn, chẳng hạn như Chrome.

(Không bắt buộc) Để 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 của Apple và thiết bị macOS đã cài đặt XCode.

2. Thiết lập Flutter

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 | Flutter
2. Đảm bảo rằng bạn đã thêm công cụ Flutter vào đường dẫn của mình.
3. Thiết lập trình chỉnh sửa cho Flutter như minh hoạ trong bài viết Thiết lập trình chỉnh sửa | Flutter Hãy nhớ cài đặt các trình bổ trợ Flutter và Dart cho trình chỉnh sửa của bạn. Trong phần còn lại của lớp học lập trình này, bạn sẽ sử dụng Android Studio.
4. Từ dòng lệnh, hãy chạy flutter doctor để quét qua chế độ thiết lập của bạn và liệt kê mọi phần phụ thuộc bị thiếu cần khắc phục. Hãy làm theo hướng dẫn để khắc phục mọi phần phụ thuộc bị thiếu quan trọng. Lưu ý rằng một số phần 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ì việc thiếu phần phụ thuộc CocoaPods sẽ không phải là vấn đề ngăn chặn.
5. Chạy lệnh này để tạo ứng dụng Flutter trong thư mục fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter, sau đó thay đổi các thư mục thành fcmflutter.

6. Trong Android Studio, chuyển đến File -> (Tệp ->) Mở, tìm đường dẫn của ứng dụng Flutter, sau đó nhấp vào Open (Mở) để mở dự án trong Android Studio. Mã ứng dụng nằm trong tệp lib/main.dart.

Trên thanh công cụ của Android Studio, hãy nhấp vào mũi tên xuống để chọn một 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 chạy ứng dụng từ trình duyệt web hoặc thiết bị iOS. Bạn có thể phải khởi động thiết bị theo cách thủ công rồi làm mới danh sách để tìm thiết bị mục tiêu.

Nhấp vào biểu tượng Chạy để chạy ứng dụng.

Xin chúc mừng! Bạn đã tạo thành công một ứ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 Giải pháp gửi thông báo qua đám mây của Firebase bằng Flutter, bạn cần:

• Một dự án Firebase.
• Giao diện dòng lệnh (CLI) của Firebase đang hoạt động.
• Một bản 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

Nếu đã có một 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 rồi đăng nhập bằng Tài khoản Google của bạn, sau đó nhấp vào Truy cập vào bảng điều khiển.
2. Trong Bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án. Làm theo hướng dẫn để tạo dự án. Đừng chọn Bật Google Analytics cho dự án này vì bạn sẽ không sử dụng Google Analytics trong dự án này.
3. Sau khi tạo dự án, hãy chuyển đến phầ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 mục Tổng quan về dự án.

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

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

Thiết lập Giao diện dòng lệnh (CLI) của Firebase

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

Chuyển đến tài liệu tham khảo về CLI của Firebase để 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 trình bổ trợ FlutterFire bằng lệnh: flutter pub add firebase_core
2. Cài đặt trình bổ trợ 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 các nền tảng hoặc nhấn Enter để sử dụng các 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 về mã nhận dạng gói iOS, hãy nhập com.flutter.fcm.fcmflutter hoặc mã nhận dạng gói iOS của riêng bạn ở định dạng [company domain name].[project name]. Sau khi lệnh hoàn tất, hãy làm mới trang Bảng điều khiển của Firebase. Bạn sẽ thấy nhóm này đã tạo ứng dụng cho những nền tảng được chọn trong dự án Firebase.

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

Thiết lập Gửi thông báo qua đám mây dành cho iOS

1. Chuyển đến trang nhà phát triển của Apple rồi nhấp vào Create a key (Tạo khoá) trên thẻ Keys (Khoá).

2. Nhập tên của khoá đó rồi chọn Apple Push Notifications (APN) (Dịch vụ thông báo đẩy của Apple).
3. Tải tệp khoá có đuôi là .p8 xuống.
4. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Cài đặt dự án của dự án rồi chọn thẻ Nhắn tin qua đám mây.

5. Tải tệp khoá APN lên cho ứng dụng iOS trong thẻ Gửi thông báo qua đám mây. Nhập mã khoá APN từ thẻ Gửi thông báo qua đám mây và mã nhóm có trong Trung tâm thành viên của Apple.

4. Chuẩn bị FCM

Trước khi có thể nhận thông báo từ FCM, một ứng dụng cần:

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

Khởi chạy

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

// 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 Get trong Android Studio để tải các gói đã thêm vào lúc Thiết lập FlutterFire, đồng thời hiển thị mã bằng chế độ cài đặt Intellisense thích hợp trong Android Studio.

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

Yêu cầu cấp quyền

Ứng dụng cần phải xin phép người dùng thì mới nhận được thông báo. Phương thức requestPermission do firebase_messaging cung cấp sẽ hiển thị một 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 cấp quyền.

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

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ụ Android Studio, hãy chọn Chrome (web) trong bộ chọn mục tiêu rồi chạy lại ứng dụng.

Sau đó, một thẻ Chrome sẽ chạy cùng với một cửa sổ bật lên yêu cầu cấp quyền. Nếu nhấp vào Allow, bạn sẽ thấy một nhật ký trong bảng điều khiển của 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 trong trình duyệt và cửa sổ bật lên sẽ không xuất hiện lại. Lưu ý: 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.

Đăng ký

Sao chép mã này vào hàm chính bên dưới nhận xét TODO: Register with FCM để đăng ký bằng FCM. Lệnh gọi getToken trả về một mã thông báo đăng ký mà máy chủ ứng dụng hoặc môi trường máy chủ đáng tin cậy có thể dùng để gửi thông báo 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, hãy chọn một thiết bị Android rồi chạy ứng dụng đó. Trong bảng điều khiển của Android Studio, mã thông báo đăng ký sẽ được in như sau:

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

Sao chép mật khẩu vào trình chỉnh sửa văn bản vì bạn sẽ sử dụng mật khẩu này để 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 khác để nhận tin nhắn trên web

Ứng dụng web cần thêm 2 bước để nhận mã thông báo đăng ký và nghe tin nhắn đến. Web cần truyền khoá VAPID cho getToken để cho phép gửi yêu cầu đến các dịch vụ đẩy web được hỗ trợ.

Trước tiên, hãy mở thẻ Gửi thông báo qua đám mây của dự án Firebase trong Bảng điều khiển của Firebase, di chuyển xuống mục Cấu hình web để tìm cặp khoá hiện có hoặc tạo một cặp khoá mới. Nhấp vào nút được đánh dấu để sao chép khoá để có thể dùng làm vapidKey.

Tiếp theo, hãy thay thế mã đăng ký trong phần Đăng ký bằng mã này, sau đó 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 đó, hãy tạo một tệp firebase-messaging-sw.js bên dưới thư mục web/ trong gốc của dự án. Sao chép nội dung 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 trình chạy 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 Cài đặt dự án -> Thẻ General (Chung), di chuyển xuống rồi tìm Web App (Ứng dụng web), sao chép phần mã firebaseConfig rồi dán vào firebase-messaging-sw.js.

Cuối cùng, trên thanh công cụ Android Studio, hãy chọn Chrome (web) trong bộ chọn mục tiêu rồi chạy ứng dụng. Trong bảng điều khiển của Android Studio, mã thông báo đăng ký sẽ được in 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 chỉnh sửa văn bản để bạn có thể sử dụng mã này để 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 đẩy và Chế độ nền trên Xcode:

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

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 thông báo, 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 đang ở chế độ nền trước và các sự kiện onBackgroundMessage khi ứng dụng chạy trong nền.

Trình xử lý thông báo trên nền trước

Trước tiên, hãy thêm một trình điều khiển luồng sau nhận xét TODO: Add stream controller trong tệp main.dart để truyền các 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 trong thư mục dự án: flutter pub add rxdart.

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

Sau đó, hãy thêm một trình xử lý sự kiện để theo dõi các thông báo trên nền trước sau nhận xét TODO: Set up foreground message handler. Công cụ này in nhật ký và xuất bản thông báo lên trình kiểm soát sự kiện phát trực tiếp.

 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 đó, hãy thay thế mã này vào tiện ích Trạng thái ban đầu trong tệp main.dart. Thao tác này sẽ thêm người đăng ký vào trình đ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 trong nền dành cho Android/iOS

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

Tạo hàm xử lý sau nhận xét TODO: Define the background message handler bên ngoài hàm chính và gọi hàm đó trong hàm chính sau nhận xét 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ý thông báo trong nền cho web

Kể từ FlutterFire firebase_Messaging phiên bản 11.2.8, việc xử lý tin nhắn trong nền trên các nền tảng dựa trên nền tảng web cần một quy trình khác. Do đó, bạn cần thêm một trình xử lý thông báo riêng biệt trong trình chạy dịch vụ 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 đầu bằng cách mở dự án https://github.com/FirebaseExtended/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 có phần phụ thuộc vào SDK firebase-admin, cung cấp chức năng gửi thông báo FCM.
2. Thiết lập một Tài khoản dịch vụ Firebase cho phép SDK quản trị Firebase uỷ quyền các lệnh gọi đến API FCM. Mở phần Cài đặt dự án trong bảng điều khiển của Firebase và chọn thẻ Tài khoản dịch vụ. Chọn "Java" và nhấp vào Generate new private key để tải đoạn cấu hình xuống.
3. Đổi tên tệp thành service-account.json rồi sao chép tệp đó 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 một tin nhắn thông báo có phần tải dữ liệu. Mã thông báo đăng ký nhắm đến phiên bản ứng dụng mà thông báo được gửi đến.

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 đã sao chép từ phần Đăng ký rồi dán vào giá trị cho biến registrationToken.
2. Nhấp vào biểu tượng Chạy để chạy hàm chính rồi gửi thông báo cho người dùng thông qua FCM.

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

Khi ứng dụng Android chạy trên nền trước, bạn sẽ thấy một nhật ký trong bảng điều khiển của Android Studio: "Xử lý thông báo trên nền trước". Nội dung thông báo cũng 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 các thông báo mới.

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

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

• Khi ứng dụng web chạy trên 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 rồi chọn Inspect. Nội dung thông báo cũng xuất hiện trong giao diện người dùng.

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

Tính năng ghi đè nền tảng của FCM HTTP v1 API cho phép các 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 nội dung tin nhắn thông báo khác nhau tuỳ theo nền tảng. Tính năng này được sử dụng đầy đủ nhất khi nhắm mục tiêu nhiều thiết bị (có thể trên nhiều nền tảng) bằng thông điệp theo chủ đề. Phần này hướng dẫn bạn các bước để khiến ứng dụng nhận thông báo theo chủ đề được tuỳ chỉnh cho từng nền tảng.

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

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

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

[Không bắt buộc] Đăng ký một chủ đề từ máy chủ cho web

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

SDK JS FCM hiện không hỗ trợ gói thuê bao 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 dành cho quản trị viên. Mã này minh hoạ gói thuê bao chủ đề phía máy chủ bằng SDK quản trị của 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 rồi nhấp vào biểu tượng Chạy để chạy hàm chính trong tệp FcmSubscriptionManager.java:

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

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

• Bạn tạo yêu cầu gửi có thông báo cơ sở và tiêu đề "A new app is available".
• Tin nhắn sẽ tạo một thông báo hiển thị có tiêu đề "A new app is available" trên nền tảng iOS và web.
• Tin nhắn sẽ tạo một thông báo hiển thị có tiêu đề "A new Android app is available" trên các 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 hàm chính của tệp FcmSender.java, hãy huỷ nhận xét sendMessageToFcmTopic();. Nhấp vào biểu tượng Chạy để gửi tin nhắn theo chủ đề.

7. Tóm tắt và nội dung tiếp theo

Tóm lại, bạn đã tìm hiểu về cách phát triển ứng dụng đa nền tảng bằng Flutter và FCM, bao gồm cả việc thiết lập môi trường, tích hợp phần phụ thuộc cũng như tính năng 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

• Để tìm hiểu thêm về cách Flutter hoạt động với các sản phẩm khác của Firebase, bao gồm cả dữ liệu xác thực và đồng bộ hoá người dùng, hãy xem bài viết Làm quen với Firebase cho Flutter.
• Để tìm hiểu thêm về FCM, bao gồm cả các chủ đề và tính năng nhắn tin trong ứng dụng: Sử dụng FCM và FIAM để gửi thông báo cho người dùng và Thông báo đẩy đầu tiên của bạn về thông báo đẩy đa hướng bằng chủ đề FCM

Tài liệu tham khảo

• Trang web Firebase
• Trang web Flutter
• Các tiện ích Flutter trong Firebase FlutterFire
• Kênh YouTube của Firebase
• Kênh YouTube của Flutter