1. Giới thiệu
Lần cập nhật gần đây nhất: ngày 4 tháng 4 năm 2022
Trong lớp học lập trình này, bạn sẽ được hướng dẫn từng bước về 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 của 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 3 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 thông báo. Cuối cùng, lớp học lập trình này giới thiệu tính năng khối dành riêng cho nền tảng của FCM HTTP API phiên bản 1. Tính năng này cho phép bạn gửi một thông báo có các hành vi khác nhau trên nhiều nền tảng.
Điều kiện tiên quyết
Hiểu biết 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 các phần phụ thuộc FCM.
- Cách gửi từng thông báo FCM đến ứng dụng của bạn.
- Cách gửi thông báo FCM theo chủ đề đến ứng dụng của bạn.
Bạn cần
- 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 tế được kết nối với máy tính.
- Một 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 mà bạn chọn, chẳng hạn như Chrome.
Nếu muốn chạy lớp học lập trình bằng nền tảng iOS, bạn cần có một thiết bị iOS, một tài khoản Apple Developer và một 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:
- Tải xuống và cài đặt Flutter cho hệ điều hành của bạn: Cài đặt | Flutter
- Đảm bảo rằng bạn đã thêm công cụ Flutter vào đường dẫn.
- Thiết lập trình chỉnh sửa cho Flutter như trong phần Thiết lập trình chỉnh sửa | Flutter. 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, bạn sẽ sử dụng Android Studio.
- Từ dòng lệnh, hãy chạy
flutter doctor
. Lệnh này sẽ quét 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 được khắc phục. Làm theo hướng dẫn để khắc phục mọi phần phụ thuộc quan trọng còn thiếu. Xin 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 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 đề cản trở. - 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 thư mục thànhfcmflutter
.
- Trong Android Studio, hãy chuyển đến File -> Open (Tệp -> Mở), tìm đường dẫn đến ứng dụng Flutter rồi 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ụ 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 khởi 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 và làm mới danh sách để tìm thiết bị mục tiêu.
Nhấp vào Run (Chạy) để khởi 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.
- Một 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ó dự án Firebase, bạn có thể bỏ qua bước này.
- Đăng nhập vào bảng điều khiển của Firebase bằng Tài khoản Google của bạn.
- Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ:
fcm4flutter
).
- Nhấp vào Tiếp tục.
- Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, rồi nhấp vào Tiếp tục.
- (Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
- Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy hãy tắt lựa chọn Google Analytics.
- Nhấp vào Tạo dự án, đợi dự án được cấp phép rồi nhấp vào Tiếp tục.
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.
Truy cập vào Tài liệu tham khảo về 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
- Cài đặt trình bổ trợ FlutterFire bằng lệnh:
flutter pub add firebase_core
- Cài đặt trình bổ trợ FCM:
flutter pub add firebase_messaging
- Thiết lập FlutterFire CLI:
dart pub global activate flutterfire_cli
- Đị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à phím cách để chọn nền tảng hoặc nhấn phím 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 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 Firebase. Bạn sẽ thấy rằng Firebase đã tạo các ứng dụng cho những nền tảng đã chọn trong dự án Firebase.
Lệnh này sẽ tạo một tệp firebase_options.dart
trong thư mục lib
. Tệp này chứa tất cả các lựa chọn cần thiết để khởi chạy.
Thiết lập dịch vụ Nhắn tin qua đám mây cho iOS
- Chuyển đến trang nhà phát triển của Apple, rồi nhấp vào Tạo khoá trên thẻ Khoá.
- Nhập tên cho khoá và đánh dấu vào Dịch vụ thông báo đẩy của Apple (APNs).
- Tải tệp khoá xuống. Tệp này có đuôi
.p8
. - 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ẻ Cloud Messaging.
- Tải tệp khoá APNs cho ứng dụng iOS lên thẻ Nhắn tin qua đám mây. Nhập mã khoá APNs trong thẻ Nhắn tin qua đám mây và mã nhận dạng nhóm. Bạn có thể tìm thấy mã nhận dạng nhóm trong trung tâm thành viên của Apple.
4. Chuẩn bị FCM
Trước khi có thể nhận được thông báo từ FCM, ứng dụng cần phải:
- Khởi chạy FlutterFire.
- Yêu cầu cấp 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 động 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 đó, hãy chạy Tools -> Flutter -> Flutter Pub Get (Công cụ -> Flutter -> Flutter Pub Get) trong Android Studio để tải các gói đã thêm tại bước Thiết lập FlutterFire và 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 động FlutterFire cho nền tảng hiện tại DefaultFirebaseOptions.currentPlatform
, được nhập từ tệp firebase_options.dart
đã tạo. Lưu ý rằng initializeApp
là một hàm không đồng bộ và từ khoá await
đảm bảo quá trình khởi tạo 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 yêu cầu người dùng cấp quyền nhận thông báo. Phương thức requestPermission
do firebase_messaging
cung cấp sẽ hiện 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 quyền.
Trước tiên, hãy sao chép mã này vào hàm chính trong phần nhận xét TODO: Request permission
. settings
được trả về cho bạn biết liệu 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 yêu cầu quyền truy cập (ví dụ: khi người dùng bật thông báo trong phần cài đặt ứng dụng). Trong lớp học lập trình này, để cho đơn giản, chúng ta sẽ yêu cầu cấp quyền khi khởi động ứng dụng.
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ẽ mở ra kèm theo 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 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. 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 quyền một lần nữa.
Đă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ý với FCM. Lệnh gọi getToken
sẽ 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 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, hãy chọn một thiết bị Android rồi chạy ứng dụng. Trong bảng điều khiển Android Studio, mã thông báo đăng ký sẽ được in ra như sau:
I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4
Sao chép mã này vào một trình soạn thảo văn bản vì bạn sẽ dùng mã này để gửi tin nhắn sau.
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
Các ứng dụng web cần thêm 2 bước để nhận mã thông báo đăng ký và theo dõi các thông báo đến. Web cần truyền khoá VAPID đến getToken
để cho phép gửi yêu cầu đến các dịch vụ thông báo đẩy trên web được hỗ trợ.
Trước tiên, hãy mở thẻ Cloud Messaging của dự án Firebase trong Bảng điều khiển của Firebase, di chuyển xuống phần 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á. Nhờ đó, bạn có thể dùng khoá này làm vapidKey.
Tiếp theo, hãy thay thế mã đăng ký trong 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 đó, hãy tạo một tệp firebase-messaging-sw.js
bên dưới thư mục web/
trong thư mục 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
. Hãy xem phần Đặt các lựa chọn thông báo trong worker 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 thẻ Project Settings (Cài đặt dự án) -> General (Chung), hãy di chuyển xuống và 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 Android Studio, mã thông báo đăng ký sẽ đượ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 một trình soạn thảo văn bản để bạn có thể dùng mã thông báo này gửi tin nhắn sau.
Các bước bổ sung để nhận tin nhắn trên iOS
Để nhận thông báo từ FCM, các thiết bị iOS cần bật Thông báo đẩy và Chế độ nền trên Xcode:
- Trong Android Studio, hãy nhấp chuột phải vào tên dự án rồi chọn Flutter -> Open iOS module in Xcode (Mở mô-đun iOS trong Xcode).
- Sau khi Xcode khởi chạy, hãy bật Thông báo đẩy và Chế độ nền trong thẻ Ký và khả năng cho mục tiêu dự án. Hãy xem phần Định cấu hình ứng dụng để biết thêm thông tin.
- 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 bạn 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.
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ư mô tả trong phần tiếp theo.
5. Nhận thông báo từ FCM
Thiết lập trình xử lý thông báo
Ứng dụng cần xử lý các sự kiện onMessage
khi thông báo đến trong khi ứng dụng đang ở chế độ nền trước và các sự kiện onBackgroundMessage
khi ứng dụng ở chế độ 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 bộ điều khiển luồng sau chú thích TODO: Add stream controller
trong tệp main.dart
để truyề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, hãy chạy Tools (Công cụ) -> Flutter -> Flutter Pub Get trong Android Studio để tải gói rxdart.dart
và hiển thị mã bằng các 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 ở nền trước sau nhận xét TODO: Set up foreground message handler
. Thao tác này in nhật ký và xuất bản thông báo cho 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 đó, hãy thay thế tiện ích State ban đầu trong tệp main.dart
bằng mã này. Mã này sẽ thêm một người đăng ký vào bộ điều khiển luồng trong tiện ích State 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ý thông báo ở chế độ nền cho Android/iOS
Các thông báo được trình xử lý onBackgroundMessage
xử lý trong khi ứng dụng chạy ở chế độ nền. Trình xử lý phải là một 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ý các thông báo (xem phần Xử lý hoạt động tương tác) hoặc đồng bộ hoá với máy chủ ứng dụng.
Tạo hàm trình 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ừ phiên bản 11.2.8 của FlutterFire firebase_messaging, việc xử lý thông báo ở chế độ nền trên các nền tảng dựa trên web đòi hỏi 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 trong worker 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
- 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ủ là một dự án Java dựa trên Gradle, có một phần phụ thuộc vào SDK firebase-admin. SDK này cung cấp chức năng gửi thông báo FCM.
- Thiết lập Tài khoản dịch vụ Firebase để cho phép Firebase Admin SDK 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 rồi chọn thẻ Tài khoản dịch vụ. Chọn "Java" rồi nhấp vào
Generate new private key
để tải đoạn mã cấu hình xuống. - Đổi tên tệp thành
service-account.json
rồi sao chép tệp đó vào đường dẫnsrc/main/resources
của dự án máy chủ.
Gửi tin nhắn kiểm thử
Trong tệp FcmSender.java
, sendMessageToFcmRegistrationToken
tạo một thông báo có tải trọng 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!!");
}
- Sao chép mã thông báo đăng ký Android đã sao chép từ phần Đăng ký rồi dán mã thông báo đó vào giá trị cho biến
registrationToken
. - Nhấp vào Chạy
để chạy hàm chính và 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 ở nền trước, bạn sẽ thấy một nhật ký trong bảng điều khiển Android Studio: "Handling a foreground message" (Xử lý thông báo ở nền trước). Nội dung tin nhắn cũng xuất hiện trong giao diện người dùng vì giao diện người dùng đã đăng ký với bộ điều khiển luồng để nhận tin nhắn mới.
Nếu dán mã thông báo đăng ký và 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, bạn sẽ thấy hành vi tương tự:
- Khi ứng dụng web ở chế độ 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 trên web.
- Khi ứng dụng web ở nền trước, bạn có thể xem nhật ký trong Bảng điều khiển Chrome bằng cách nhấp chuột phải vào web rồi chọn
Inspect
. Nội dung tin nhắn cũng xuất hiện trong giao diện người dùng.
6. Gửi thông báo theo chủ đề
Tính năng ghi đè nền tảng của FCM HTTP v1 API cho phép yêu cầu gửi thông báo 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 tính năng này là hiển thị nội dung 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 hiệu quả nhất khi nhắm đến nhiều thiết bị (có thể trải rộng trên nhiều nền tảng) bằng tính năng nhắn tin theo chủ đề. Phần này hướng dẫn bạn các bước để ứng dụng của bạn nhận được một thông báo theo chủ đề được tuỳ chỉnh cho từng nền tảng.
Đăng ký theo dõi một chủ đề từ ứng dụ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ý nhận thông báo về 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.
FCM JS SDK hiện không hỗ trợ tính năng đăng ký nhận thông báo theo 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 Admin SDK. Đoạn mã này minh hoạ việc đăng ký theo dõi chủ đề phía máy chủ bằng Java Admin SDK.
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 Run (Chạy
) để chạy hàm chính trong tệp
FcmSubscriptionManager.java
:
Gửi tin nhắn có các tham số ghi đè nền tảng đến một chủ đề
Giờ đây, 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 một yêu cầu gửi có thông báo cơ bản và tiêu đề "
A new app is available
". - Thông báo này sẽ tạo ra một thông báo hiển thị có tiêu đề "
A new app is available
" trên các nền tảng iOS và web. - Thông báo này tạo ra 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 main của tệp FcmSender.java
, hãy xoá dấu nhận xét sendMessageToFcmTopic();
. Nhấp vào Chạy để gửi thông báo theo chủ đề.
7. Tóm tắt và các bước tiếp theo
Tóm lại, bạn đã tìm hiểu về hoạt động phát triển ứng dụng đa nền tảng hấp dẫn bằng cách sử dụ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ư nhận và gửi thông báo. Để tìm hiểu kỹ 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ả xác thực người dùng và đồng bộ hoá dữ liệu, hãy xem bài viết Tìm hiểu về Firebase cho Flutter.
- Để tìm hiểu thêm về FCM, bao gồm cả tính năng nhắn tin trong ứng dụng và chủ đề: Sử dụng FCM và FIAM để gửi thông báo cho người dùng và Thông báo đẩy truyền tin đầu tiên bằng cách sử dụng chủ đề FCM