Mengirim dan menerima notifikasi untuk aplikasi Flutter menggunakan Firebase Cloud Messaging

1. Pengantar

Terakhir Diperbarui: 04-04-2022

Codelab ini memandu Anda melalui proses pengembangan aplikasi multiplatform dengan Firebase Cloud Messaging (FCM) menggunakan Flutter. Anda akan menulis satu bagian penerapan aplikasi, lalu mem-build dan menjalankannya dengan lancar di tiga platform: Android, iOS, dan web. Anda juga akan mempelajari cara mengintegrasikan FCM di Flutter dan cara menulis kode untuk menerima dan mengirim pesan. Terakhir, codelab ini memperkenalkan fitur blok khusus platform FCM HTTP v1 API, yang memungkinkan Anda mengirim satu pesan yang memiliki perilaku berbeda di berbagai platform.

Prasyarat

Pemahaman dasar tentang Flutter.

Hal yang akan Anda pelajari

  • Cara menyiapkan dan membuat aplikasi Flutter.
  • Cara menambahkan dependensi FCM.
  • Cara mengirim pesan FCM tunggal ke aplikasi Anda.
  • Cara mengirim pesan FCM topik ke aplikasi Anda.

Hal yang akan Anda perlukan

  • Android Studio Versi Stabil Terbaru yang dikonfigurasi dengan plugin Dart dan Flutter.

Anda dapat menjalankan codelab menggunakan perangkat berikut:

Secara opsional, untuk menjalankan codelab menggunakan platform iOS, Anda memerlukan perangkat iOS, akun Apple Developer, dan perangkat macOS dengan XCode yang terinstal.

2. Penyiapan Flutter

Jika Anda sudah menyiapkan lingkungan pengembangan Flutter, lewati bagian ini.

Untuk menyiapkan lingkungan pengembangan Flutter, ikuti langkah-langkah berikut:

  1. Download dan instal Flutter untuk sistem operasi Anda: Install | Flutter
  2. Pastikan alat Flutter ditambahkan ke jalur Anda.
  3. Siapkan editor Anda untuk Flutter seperti yang ditunjukkan di Menyiapkan editor | Flutter. Pastikan untuk menginstal plugin Flutter dan Dart untuk editor Anda. Untuk langkah-langkah selanjutnya dalam codelab ini, Anda akan menggunakan Android Studio.
  4. Dari command line, jalankan flutter doctor, yang memindai penyiapan Anda dan mencantumkan dependensi yang tidak ada dan perlu diperbaiki. Ikuti petunjuk untuk memperbaiki dependensi penting yang tidak ada. Perhatikan bahwa beberapa dependensi mungkin tidak diperlukan. Misalnya, jika Anda tidak akan mengembangkan untuk iOS, maka dependensi CocoaPods yang tidak ada tidak akan menjadi masalah yang menghalangi.
  5. Jalankan perintah ini untuk membuat aplikasi Flutter di direktori fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter, lalu ubah direktori ke fcmflutter.
  1. Di Android Studio, buka File -> Open, temukan jalur aplikasi Flutter Anda, lalu klik Open untuk membuka project di Android Studio. Kode aplikasi ada di file lib/main.dart.

Di toolbar Android Studio, klik Panah bawah untuk memilih perangkat Android. Jika pemilih target kosong, instal perangkat Android virtual, atau browser Chrome atau simulator iOS jika Anda lebih suka meluncurkan aplikasi dari browser web atau perangkat iOS. Anda mungkin perlu meluncurkan perangkat secara manual dan memuat ulang daftar untuk menemukan perangkat target.

Toolbar Android Studio dengan panah drop-down menu target build disorot.

Klik Run Tombol jalankan di Android Studio untuk meluncurkan aplikasi.

UI aplikasi demo Flutter yang diluncurkan

Selamat! Anda telah berhasil membuat aplikasi Flutter.

3. Penyiapan Firebase dan FlutterFire

Untuk mengembangkan aplikasi yang terintegrasi dengan Firebase Cloud Messaging menggunakan Flutter, Anda memerlukan:

  • Project Firebase.
  • Firebase CLI yang berfungsi.
  • Penginstalan FlutterFire.
  • Aplikasi yang dikonfigurasi dan dibuat dengan flutterfire configure.

Buat project Firebase Anda

Jika sudah memiliki project Firebase, Anda dapat melewati langkah ini.

  1. Login ke Firebase console menggunakan Akun Google Anda.
  2. Klik tombol untuk membuat project baru, lalu masukkan nama project (misalnya, fcm4flutter).
  3. Klik Lanjutkan.
  4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Continue.
  5. (Opsional) Aktifkan bantuan AI di Firebase console (disebut "Gemini di Firebase").
  6. Untuk codelab ini, Anda tidak memerlukan Google Analytics, jadi nonaktifkan opsi Google Analytics.
  7. Klik Buat project, tunggu hingga project Anda disediakan, lalu klik Lanjutkan.

Selamat! Anda telah berhasil membuat project Firebase.

Menyiapkan Firebase CLI

Jika telah menyiapkan Firebase CLI, Anda dapat melewati langkah ini.

Buka referensi Firebase CLI untuk mendownload dan menginstal Firebase CLI. Login ke Firebase dengan Akun Google Anda menggunakan perintah berikut:

firebase login

Menyiapkan FlutterFire

  1. Instal plugin FlutterFire menggunakan perintah: flutter pub add firebase_core
  2. Instal plugin FCM: flutter pub add firebase_messaging
  3. Siapkan FlutterFire CLI: dart pub global activate flutterfire_cli
  4. Konfigurasi project Firebase di Flutter: flutterfire configure --project=fcm4flutter. Gunakan tombol panah dan spasi untuk memilih platform atau tekan Enter untuk menggunakan platform default.

Codelab ini menggunakan platform default (Android, iOS, dan web), tetapi Anda dapat memilih hanya satu atau dua platform. Jika diminta untuk memasukkan ID paket iOS, masukkan com.flutter.fcm.fcmflutter atau ID paket iOS Anda sendiri dalam format [company domain name].[project name]. Setelah perintah selesai, muat ulang halaman Firebase Console. Anda akan melihat bahwa aplikasi tersebut telah membuat aplikasi untuk platform yang dipilih di project Firebase.

Screenshot yang dipangkas dari Firebase Console yang menampilkan aplikasi yang dibuat untuk platform yang dipilih

Perintah ini menghasilkan file firebase_options.dart di direktori lib, yang berisi semua opsi yang diperlukan untuk inisialisasi.

Menyiapkan Cloud Messaging untuk iOS

  1. Buka halaman developer Apple, lalu klik Buat kunci di tab Kunci.

Screenshot halaman developer Apple yang dipangkas dan menandai komponen halaman untuk pembuatan kunci

  1. Masukkan nama untuk kunci dan centang Apple Push Notification service (APNs). Screenshot yang dipangkas dari halaman developer Apple yang menandai kotak teks untuk nama kunci baru
  2. Download file kunci, yang memiliki ekstensi file .p8. Screenshot yang dipangkas dari halaman developer Apple yang menandai tombol untuk mendownload kunci
  3. Di Firebase console, buka Project Settings project, lalu pilih tab Cloud Messaging.

Screenshot halaman Firebase Console yang dipangkas dan menyoroti komponen untuk memperbarui setelan project

Screenshot halaman Firebase Console yang dipangkas dan menandai tab Cloud Messaging

  1. Upload file kunci APNs untuk aplikasi iOS di tab Cloud Messaging. Masukkan ID kunci APNs dari tab Cloud Messaging dan ID tim, yang dapat ditemukan di pusat keanggotaan Apple. Screenshot halaman Firebase Console yang dipangkas dan menyoroti tombol untuk mengupload Kunci Autentikasi APNs

4. Persiapan FCM

Sebelum dapat menerima pesan dari FCM, aplikasi harus:

  • Lakukan inisialisasi FlutterFire.
  • Meminta izin notifikasi.
  • Daftar ke FCM untuk mendapatkan token pendaftaran.

Inisialisasi

Untuk melakukan inisialisasi layanan, ganti fungsi utama (lib/main.dart) dengan kode ini:

// 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());
}

Kemudian, jalankan Tools -> Flutter -> Flutter Pub Get di Android Studio untuk memuat paket yang ditambahkan di Menyiapkan FlutterFire, dan menampilkan kode dengan setelan Intellisense yang sesuai di Android Studio.

Tindakan ini menginisialisasi FlutterFire untuk platform saat ini DefaultFirebaseOptions.currentPlatform, yang diimpor dari file firebase_options.dart yang dihasilkan. Perhatikan bahwa initializeApp adalah fungsi asinkron, dan kata kunci await memastikan inisialisasi selesai sebelum menjalankan aplikasi.

Meminta izin

Aplikasi perlu meminta izin pengguna untuk menerima notifikasi. Metode requestPermission yang disediakan oleh firebase_messaging menampilkan dialog atau pop-up yang meminta pengguna untuk mengizinkan atau menolak izin.

Pertama, salin kode ini ke fungsi utama di bawah komentar TODO: Request permission. settings yang ditampilkan memberi tahu Anda apakah pengguna telah memberikan izin. Sebaiknya minta izin hanya saat pengguna perlu menggunakan fitur yang memerlukan akses (misalnya, saat pengguna mengaktifkan notifikasi di setelan aplikasi). Dalam codelab ini, kita meminta izin saat aplikasi dimulai agar lebih mudah.

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}');
 }

Selanjutnya, di toolbar Android Studio, pilih Chrome (web) dari pemilih target, lalu jalankan aplikasi lagi.

Screenshot toolbar Android Studio yang dipangkas dengan pemilih target dan tombol Run

Kemudian, tab Chrome akan diluncurkan dengan pop-up yang meminta izin. Jika Anda mengklik Allow, Anda akan melihat log di konsol Android Studio: Permission granted: AuthorizationStatus.authorized. Setelah Anda mengizinkan atau memblokir permintaan izin, respons Anda akan disimpan bersama aplikasi Anda di browser, dan pop-up tidak akan ditampilkan lagi. Perhatikan bahwa saat Anda menjalankan aplikasi web lagi di Android Studio, Anda mungkin diminta untuk memberikan izin lagi. Screenshot tab Chrome yang dipangkas dengan pop-up yang meminta

Pendaftaran

Salin kode ini ke fungsi utama di bawah komentar TODO: Register with FCM untuk mendaftar ke FCM. Panggilan getToken menampilkan token pendaftaran yang dapat digunakan oleh server aplikasi atau lingkungan server tepercaya untuk mengirim pesan kepada pengguna.

// 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');
}

Di toolbar Android Studio, pilih perangkat Android dan jalankan aplikasi. Di konsol Android Studio, token pendaftaran dicetak seperti ini:

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

Salin ke editor teks, karena Anda akan menggunakannya untuk mengirim pesan nanti.

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

Langkah-langkah tambahan untuk menerima pesan di web

Aplikasi web memerlukan dua langkah tambahan untuk mendapatkan token pendaftaran dan memproses pesan masuk. Web harus meneruskan kunci VAPID ke getToken untuk mengizinkan permintaan kirim ke layanan web push yang didukung.

Pertama, buka tab Cloud Messaging project Firebase di Firebase Console, scroll ke bawah ke bagian Web configuration untuk menemukan pasangan kunci yang ada, atau buat pasangan kunci baru. Klik tombol yang ditandai untuk menyalin kunci agar dapat digunakan sebagai vapidKey.

Screenshot yang dipangkas dari komponen Web Push Certificates di halaman konfigurasi Web yang menandai pasangan kunci

Selanjutnya, ganti kode pendaftaran di bagian Pendaftaran dengan kode ini, lalu perbarui 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');
 }

Kemudian, buat file firebase-messaging-sw.js di bawah direktori web/ di root project Anda. Salin kode berikut ke firebase-messaging-sw.js untuk mengizinkan aplikasi web menerima peristiwa onMessage. Lihat Menyetel opsi notifikasi dalam pekerja layanan untuk mengetahui informasi selengkapnya.

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

Setelah itu, di tab Project Settings -> General, scroll ke bawah dan temukan Web App, salin bagian kode firebaseConfig dan tempelkan ke firebase-messaging-sw.js. Screenshot yang dipangkas dari komponen Aplikasi Web di halaman konfigurasi Firebase

Terakhir, di toolbar Android Studio, pilih Chrome (web) di pemilih target dan jalankan aplikasi. Di konsol Android Studio, token pendaftaran akan dicetak seperti ini:

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

Salin token pendaftaran ke editor teks agar Anda dapat menggunakannya untuk mengirim pesan nanti.

Langkah tambahan untuk menerima pesan di iOS

Untuk menerima pesan dari FCM, perangkat iOS harus mengaktifkan Push Notification dan Background Modes di Xcode:

  1. Di Android Studio, klik kanan nama project, lalu pilih Flutter -> Open iOS module in Xcode. Screenshot yang dipangkas dari
  2. Setelah Xcode diluncurkan, aktifkan Push Notifications dan Background Modes di tab Signing & Capabilities untuk target project. Lihat Mengonfigurasi aplikasi untuk mengetahui informasi selengkapnya.
  3. Di toolbar Android Studio, pilih perangkat iOS di pemilih target dan jalankan aplikasi. Setelah izin notifikasi diberikan, token pendaftaran akan dicetak di konsol Android Studio.

Screenshot aplikasi iOS yang dipangkas dan meminta izin untuk mengirim notifikasi

Selamat, Anda telah berhasil mendaftarkan aplikasi Anda ke FCM. Anda siap menerima pesan, seperti yang dijelaskan di bagian berikutnya.

5. Menerima pesan dari FCM

Menyiapkan pengendali pesan

Aplikasi perlu menangani peristiwa onMessage saat pesan tiba ketika aplikasi berada dalam mode latar depan, dan peristiwa onBackgroundMessage saat aplikasi berada di latar belakang.

Penanganan pesan latar depan

Pertama, tambahkan pengontrol aliran setelah komentar TODO: Add stream controller dalam file main.dart untuk meneruskan pesan dari pengendali peristiwa ke UI.

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

Untuk menambahkan dependensi rxdart, jalankan perintah ini dari direktori project: flutter pub add rxdart.

Selanjutnya, jalankan Tools -> Flutter -> Flutter Pub Get di Android Studio untuk memuat paket rxdart.dart dan menampilkan kode dengan setelan Intellisense yang sesuai di Android Studio.

Kemudian, tambahkan pengendali peristiwa untuk memproses pesan latar depan setelah komentar TODO: Set up foreground message handler. Fungsi ini mencetak log dan memublikasikan pesan ke pengontrol streaming.

 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);
 });

Setelah itu, ganti widget State asli di file main.dart dengan kode ini, yang menambahkan subscriber ke pengontrol stream di widget State dan menampilkan pesan terakhir di widget.

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),
         ],
       ),
     ),
   );
 }
}

Penanganan pesan di latar belakang untuk Android/iOS

Pesan ditangani oleh pengendali onBackgroundMessage saat aplikasi berada di latar belakang. Handler harus berupa fungsi tingkat teratas. UI dapat diperbarui saat aplikasi dibawa ke latar depan dengan menangani pesan (lihat Menangani interaksi) atau menyinkronkan dengan server aplikasi.

Buat fungsi handler setelah komentar TODO: Define the background message handler di luar fungsi utama dan panggil di fungsi utama setelah komentar 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());
}

Pengendali pesan latar belakang untuk web

Mulai versi 11.2.8 firebase_messaging FlutterFire, penanganan pesan latar belakang di platform berbasis web memerlukan alur yang berbeda. Oleh karena itu, Anda perlu menambahkan handler pesan terpisah di pekerja layanan web/firebase-messaging-sw.js.

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

Menyiapkan server aplikasi

  1. Impor kode server awal dengan membuka project https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server di Android Studio. Server adalah project Java berbasis Gradle dengan dependensi pada SDK firebase-admin, yang menyediakan fungsi pengiriman pesan FCM.
  2. Siapkan Akun Layanan Firebase yang memungkinkan Firebase Admin SDK mengizinkan panggilan ke FCM API. Buka Project Settings di Firebase console, lalu pilih tab Service accounts. Pilih 'Java' dan klik Generate new private key untuk mendownload cuplikan konfigurasi. Screenshot yang dipangkas yang menandai cuplikan konfigurasi Admin SDK komponen Akun layanan di halaman Setelan project
  3. Ganti nama file menjadi service-account.json, lalu salin ke jalur src/main/resources project server.

Mengirim pesan uji coba

Dalam file FcmSender.java, sendMessageToFcmRegistrationToken menyusun pesan notifikasi dengan payload data. Token pendaftaran menargetkan instance aplikasi yang menerima pesan.

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. Salin token pendaftaran Android yang disalin dari bagian Pendaftaran, lalu tempelkan ke nilai untuk variabel registrationToken.
  2. Klik Run Tombol jalankan di Android Studio untuk menjalankan fungsi utama dan mengirim pesan kepada pengguna melalui FCM. Screenshot yang dipangkas dari ikon Run yang ditampilkan di samping fungsi utama FcmSender.java di Android Studio

Saat aplikasi Android berada di latar belakang, pesan akan muncul di area notifikasi.

Screenshot pesan yang dipangkas yang muncul di area notifikasi Android

Saat aplikasi Android berada di latar depan, Anda akan melihat log di konsol Android Studio: "Handling a foreground message". Konten pesan juga ditampilkan di UI karena UI berlangganan pengontrol streaming untuk pesan baru.

Screenshot yang dipangkas dari konten pesan yang ditampilkan di aplikasi Android

Jika Anda menempelkan token pendaftaran dan mengirim pesan dari server aplikasi atau lingkungan server tepercaya lainnya, Anda akan melihat perilaku serupa:

  • Saat aplikasi web berada di latar belakang (yaitu, saat aplikasi disembunyikan oleh jendela lain atau tab lain aktif), Anda akan melihat notifikasi web.

Screenshot yang dipangkas dari notifikasi web yang ditampilkan di browser Chrome

  • Saat aplikasi web berada di latar depan, Anda dapat melihat log di Konsol Chrome dengan mengklik kanan web dan memilih Inspect. Konten pesan juga ditampilkan di UI. Screenshot yang dipangkas dari Konsol Chrome dengan log debug

6. Mengirim pesan topik

Fitur penggantian platform FCM HTTP v1 API memungkinkan permintaan pengiriman pesan memiliki perilaku yang berbeda di berbagai platform. Salah satu kasus penggunaan fitur ini adalah untuk menampilkan konten pesan notifikasi yang berbeda berdasarkan platform. Fitur ini paling banyak digunakan saat menargetkan beberapa perangkat (yang mungkin mencakup beberapa platform) dengan pesan topik. Bagian ini akan memandu Anda melalui langkah-langkah untuk membuat aplikasi Anda menerima pesan topik yang disesuaikan untuk setiap platform.

Berlangganan topik dari klien

Untuk berlangganan topik, panggil metode messaging.subscribeToTopic di akhir fungsi utama dalam file main.dart aplikasi Flutter.

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

[Opsional] Berlangganan topik dari server untuk web

Anda dapat melewati bagian ini jika Anda tidak melakukan pengembangan di platform web.

Saat ini, FCM JS SDK tidak mendukung langganan topik sisi klien. Sebagai gantinya, Anda dapat berlangganan menggunakan API pengelolaan topik sisi server Admin SDK. Kode ini menggambarkan langganan topik sisi server dengan 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());
 }

Buka server aplikasi dan klik Run Tombol jalankan di Android Studio untuk menjalankan fungsi utama dalam file FcmSubscriptionManager.java:

Screenshot yang dipangkas dari ikon Run yang ditampilkan di samping fungsi utama FcmSubscriptionManager.java di Android Studio

Mengirim pesan dengan penggantian platformke topik

Sekarang Anda siap mengirim pesan penggantian platform topik. Dalam cuplikan kode berikut:

  • Anda membuat permintaan pengiriman dengan pesan dasar dan judul "A new app is available".
  • Pesan ini menghasilkan notifikasi tampilan dengan judul "A new app is available" di platform iOS dan web.
  • Pesan ini menghasilkan notifikasi tampilan dengan judul "A new Android app is available" di perangkat 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!!");
 }

Di fungsi utama file FcmSender.java, hapus tanda komentar sendMessageToFcmTopic();. Klik Run Tombol jalankan di Android Studio untuk mengirim pesan topik.

7. Ringkasan dan langkah selanjutnya

Singkatnya, Anda telah mempelajari pengembangan aplikasi multiplatform yang menarik menggunakan Flutter dan FCM, yang mencakup penyiapan lingkungan, integrasi dependensi, serta penerimaan dan pengiriman pesan. Untuk mempelajari lebih lanjut, lihat materi berikut:

Codelabs

Referensi