Cara Menggunakan Push Notification di Flutter: Panduan Lengkap untuk Developer

Push notification adalah fitur krusial di aplikasi modern yang membantu menjaga pengguna tetap terhubung dan terlibat. Baik itu notifikasi chat baru, pengingat, atau update penting, kemampuan untuk mengirim pesan langsung ke perangkat pengguna tanpa mereka harus membuka aplikasi adalah game changer. Di ekosistem Flutter, integrasi push notification bisa terasa sedikit menantang di awal, terutama karena melibatkan setup di sisi platform native (Android dan iOS) dan layanan cloud seperti Firebase Cloud Messaging (FCM).

Artikel ini akan memandu Anda langkah demi langkah tentang cara mengimplementasikan push notification di aplikasi Flutter Anda, mulai dari persiapan awal hingga penanganan notifikasi yang masuk. Kita akan fokus pada penggunaan Firebase Cloud Messaging (FCM) karena ini adalah solusi paling umum dan direkomendasikan untuk Flutter.

Memahami Push Notification di Flutter

Sebelum masuk ke implementasi, penting untuk memahami beberapa konsep dasar:

• Firebase Cloud Messaging (FCM): Ini adalah layanan cross-platform dari Google yang memungkinkan Anda mengirim pesan ke aplikasi di Android, iOS, dan web secara gratis. FCM bertanggung jawab untuk mengirim, merouting, dan antrean pesan.
• Notification Messages vs. Data Messages:
• Notification Message: Didesain untuk ditampilkan kepada pengguna. FCM secara otomatis menangani tampilan notifikasi di perangkat. Ini berisi judul, body, ikon, dan suara.
• Data Message: Didesain untuk diproses oleh aplikasi Anda. FCM hanya mengirimkan payload data ke aplikasi Anda, dan aplikasi bertanggung jawab untuk memproses atau menampilkan notifikasi jika diinginkan. Ini berguna untuk mengirim update latar belakang atau memicu tindakan tertentu dalam aplikasi.
• `firebase_messaging` Plugin: Plugin resmi Flutter untuk integrasi dengan FCM. Ini menyediakan API untuk mendaftar token perangkat, menerima pesan, dan menangani interaksi pengguna dengan notifikasi.
• `flutter_local_notifications` Plugin: Meskipun FCM dapat menampilkan notifikasi, terkadang saat aplikasi di foreground, kita ingin memiliki kontrol lebih lanjut atas tampilan notifikasi. Plugin ini memungkinkan aplikasi menampilkan notifikasi yang dibuat secara lokal, seringkali digunakan untuk menampilkan notification messages FCM ketika aplikasi sedang aktif di latar depan.

Persiapan Awal

Sebelum memulai, pastikan Anda memiliki prasyarat berikut:

• Flutter SDK Terinstall: Pastikan Anda memiliki lingkungan pengembangan Flutter yang berfungsi dengan baik.
• Firebase CLI Terinstall: Firebase Command Line Interface (CLI) akan sangat membantu dalam mengelola proyek Firebase Anda. Jika belum, instal dengan npm install -g firebase-tools.
• Editor Kode: Visual Studio Code atau Android Studio dengan plugin Flutter yang relevan.
• Akun Google: Untuk mengakses Firebase Console.

Langkah 1: Setup Proyek Firebase

Langkah pertama adalah menyiapkan proyek Firebase dan mengintegrasikannya dengan aplikasi Flutter Anda.

1.1 Membuat Proyek Firebase Baru

1. Kunjungi Firebase Console.
2. Klik Add project atau Buat proyek baru.
3. Ikuti langkah-langkah untuk membuat proyek Anda. Berikan nama yang sesuai. Anda bisa menonaktifkan Google Analytics jika tidak diperlukan.
4. Setelah proyek dibuat, masuk ke dashboard proyek.

1.2 Menambahkan Aplikasi Flutter ke Firebase

Kita akan menggunakan Firebase CLI untuk proses ini, yang jauh lebih efisien daripada melakukannya secara manual.

1. Login ke Firebase CLI: Buka terminal Anda dan jalankan firebase login. Ini akan membuka browser untuk Anda login ke akun Google.
2. Konfigurasi Proyek Flutter: Di root folder proyek Flutter Anda, jalankan perintah berikut:

   firebase init flutter

   Ikuti prompt:

   • Pilih proyek Firebase yang baru saja Anda buat.
   • Pilih platform (Android dan iOS).
   • Firebase CLI akan membuat file konfigurasi yang diperlukan dan menambahkan dependensi yang relevan ke proyek Flutter Anda.
3. Verifikasi File Konfigurasi: Pastikan file google-services.json (untuk Android) ada di android/app/ dan GoogleService-Info.plist (untuk iOS) ada di ios/Runner/. Firebase CLI seharusnya sudah menempatkannya secara otomatis.

1.3 Konfigurasi Platform Native (Jika Belum Otomatis)

Meskipun Firebase CLI sudah melakukan banyak hal, ada beberapa konfigurasi tambahan yang perlu diperiksa atau dilakukan secara manual untuk memastikan push notification berfungsi dengan baik.

Untuk Android:

1. android/build.gradle: Pastikan ada dependensi Google Services di bagian buildscript dan allprojects.

   build.gradle (project level):

   buildscript {
       dependencies {
           // ...
           classpath 'com.google.gms:google-services:4.4.1' // Pastikan versi terbaru
       }
   }
   
   allprojects {
       repositories {
           // ...
           google() // Tambahkan ini jika belum ada
       }
   }
   

2. android/app/build.gradle: Terapkan plugin Google Services di bagian atas dan tambahkan dependensi Firebase.

   build.gradle (app level):

   apply plugin: 'com.android.application'
   apply plugin: 'com.google.gms.google-services' // Tambahkan ini
   
   android {
       // ...
   }
   
   dependencies {
       // ...
       implementation platform('com.google.firebase:firebase-bom:32.7.0') // Versi terbaru
       implementation 'com.google.firebase:firebase-analytics'
       implementation 'com.google.firebase:firebase-messaging' // Tambahkan ini
   }
   

Untuk iOS:

1. CocoaPods: Navigasi ke folder ios/ di terminal Anda dan jalankan pod install. Ini akan menginstal semua dependensi iOS yang diperlukan oleh Firebase.
2. Xcode Project Settings:
   • Buka proyek Anda di Xcode (buka ios/Runner.xcworkspace).
   • Pilih target Runner di panel navigasi kiri.
   • Pergi ke tab Signing & Capabilities.
   • Klik + Capability dan tambahkan Push Notifications.
   • Klik + Capability lagi dan tambahkan Background Modes. Centang Remote notifications.
3. ios/Runner/AppDelegate.swift (atau AppDelegate.m untuk Objective-C): Pastikan Firebase diinisialisasi. Firebase CLI biasanya menambahkan ini secara otomatis.

   Untuk Swift:

   import Flutter
   import Firebase
   import UIKit
   import UserNotifications // Tambahkan ini untuk iOS 10+ notifikasi
   
   @UIApplicationMain
   @objc class AppDelegate: FlutterAppDelegate {
     override func application(
       _ application: UIApplication,
       didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
     ) -> Bool {
       FirebaseApp.configure() // Pastikan ini ada
       GeneratedPluginRegistrant.register(with: self)
   
       // Untuk iOS 10+ notifikasi, tambahkan ini
       if #available(iOS 10.0, *) {
         UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
       }
   
       return super.application(application, didFinishLaunchingWithOptions: launchOptions)
     }
   }
   

Langkah 2: Integrasi Firebase Messaging di Flutter

Sekarang kita akan menulis kode Flutter untuk berinteraksi dengan FCM.

2.1 Tambahkan Dependensi

Buka file pubspec.yaml Anda dan tambahkan dependensi berikut:

dependencies:
  flutter:
    sdk: flutter
  
  firebase_core: ^2.24.2 # Pastikan versi terbaru
  firebase_messaging: ^11.4.4 # Pastikan versi terbaru
  flutter_local_notifications: ^17.0.0 # Akan digunakan untuk notifikasi lokal

Jalankan flutter pub get di terminal Anda.

2.2 Inisialisasi Firebase

Aplikasi Flutter Anda perlu tahu cara berkomunikasi dengan proyek Firebase Anda. Lakukan inisialisasi di main().

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

// Fungsi handler untuk pesan di background/terminated
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print("Handling a background message: ${message.messageId}");
  // Anda bisa memproses data di sini
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(); // Inisialisasi Firebase

  // Daftarkan handler background
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  runApp(const MyApp());
}

2.3 Meminta Izin Notifikasi dan Mendapatkan FCM Token

Setiap perangkat yang ingin menerima notifikasi harus memiliki token FCM unik. Aplikasi Anda perlu meminta izin dari pengguna dan kemudian mendapatkan token ini.

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _token;

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

  Future<void> _requestPermissions() async {
    FirebaseMessaging messaging = FirebaseMessaging.instance;

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

    print('User granted permission: ${settings.authorizationStatus}');
  }

  Future<void> _getToken() async {
    String? token = await FirebaseMessaging.instance.getToken();
    setState(() {
      _token = token;
    });
    print('FCM Token: $_token');
    // Anda harus mengirim token ini ke server backend Anda
    // agar backend bisa mengirim notifikasi ke perangkat ini.
  }

  // ... (lanjutan _configureFirebaseMessaging akan ada di bawah)
}

2.4 Menangani Pesan FCM

Ada tiga skenario utama saat notifikasi diterima:

1. Foreground (onMessage): Aplikasi sedang berjalan dan aktif di layar.
2. Background (onBackgroundMessage): Aplikasi berjalan di latar belakang tetapi tidak aktif di layar.
3. Terminated (getInitialMessage): Aplikasi benar-benar tertutup (tidak berjalan).

Mari kita tambahkan logika penanganan pesan ke _MyAppState:

// Lanjutan dari _MyAppState

class _MyAppState extends State<MyApp> {
  // ... (kode _token, initState, _requestPermissions, _getToken sebelumnya)

  void _configureFirebaseMessaging() {
    // 1. Ketika aplikasi di foreground dan menerima pesan
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Got a message whilst in the foreground!');
      print('Message data: ${message.data}');

      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification?.title}');
        // Di sini kita akan menggunakan flutter_local_notifications untuk menampilkan
        // notifikasi secara lokal agar terlihat oleh pengguna saat di foreground.
        // Kita akan bahas ini di Langkah 3.
      }
    });

    // 2. Ketika pengguna mengklik notifikasi dan aplikasi terbuka dari terminated state
    FirebaseMessaging.instance.getInitialMessage().then((RemoteMessage? message) {
      if (message != null) {
        print('App opened from terminated state by notification!');
        print('Initial message data: ${message.data}');
        // Lakukan navigasi atau tindakan berdasarkan data pesan.
      }
    });

    // 3. Ketika pengguna mengklik notifikasi dan aplikasi terbuka dari background state
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('App opened from background by notification!');
      print('Message data: ${message.data}');
      // Lakukan navigasi atau tindakan berdasarkan data pesan.
    });

    // Refresh token jika berubah
    FirebaseMessaging.instance.onTokenRefresh.listen((String token) {
      print('FCM Token refreshed: $token');
      // Kirim token baru ini ke server backend Anda.
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Push Notif',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Push Notification Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('FCM Token Anda:'),
              SelectableText(_token ?? 'Memuat token...'),
              const SizedBox(height: 20),
              const Text('Lihat log konsol untuk notifikasi yang masuk.'),
            ],
          ),
        ),
      ),
    );
  }
}

Langkah 3: Menampilkan Notifikasi Lokal (Flutter Local Notifications)

Seperti yang disebutkan, saat aplikasi di foreground, notifikasi dari FCM tidak selalu ditampilkan secara otomatis oleh sistem operasi. Di sinilah flutter_local_notifications berperan. Kita akan menggunakannya untuk menampilkan notifikasi saat aplikasi di foreground.

3.1 Inisialisasi Flutter Local Notifications

Tambahkan inisialisasi plugin ini di initState.

// Lanjutan dari _MyAppState

class _MyAppState extends State<MyApp> {
  // ... (kode sebelumnya)

  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  @override
  void initState() {
    super.initState();
    _requestPermissions();
    _getToken();
    _initLocalNotifications(); // Tambahkan inisialisasi ini
    _configureFirebaseMessaging();
  }

  Future<void> _initLocalNotifications() async {
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    final DarwinInitializationSettings initializationSettingsDarwin =
        DarwinInitializationSettings(
      onDidReceiveLocalNotification: (id, title, body, payload) async {
        // Handle notifikasi saat aplikasi di foreground (iOS lama)
        print('Local notif tapped (iOS lama): $title, $body, $payload');
      },
    );

    final InitializationSettings initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: initializationSettingsDarwin,
    );

    await flutterLocalNotificationsPlugin.initialize(
      initializationSettings,
      onDidReceiveNotificationResponse: (NotificationResponse response) async {
        // Handle notifikasi ketika di-tap
        print('Notification tapped: ${response.payload}');
        // Lakukan sesuatu berdasarkan payload
      },
    );
  }

  // ... (lanjutan _configureFirebaseMessaging akan dimodifikasi di bawah)
}

3.2 Mengintegrasikan FCM onMessage dengan Local Notifications

Modifikasi handler onMessage untuk menampilkan notifikasi menggunakan flutter_local_notifications.

// Lanjutan dari _MyAppState

class _MyAppState extends State<MyApp> {
  // ... (kode sebelumnya)

  void _configureFirebaseMessaging() {
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Got a message whilst in the foreground!');
      print('Message data: ${message.data}');

      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification?.title}');
        _showLocalNotification(message); // Panggil fungsi ini untuk menampilkan notifikasi lokal
      }
    });

    // ... (kode onMessageOpenedApp dan getInitialMessage lainnya)
  }

  Future<void> _showLocalNotification(RemoteMessage message) async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
      'high_importance_channel', // ID channel, harus sama dengan di AndroidManifest
      'High Importance Notifications', // Nama channel
      channelDescription: 'This channel is used for important notifications.',
      importance: Importance.max,
      priority: Priority.high,
      showWhen: false,
      icon: '@mipmap/ic_launcher', // Icon notifikasi
    );
    const DarwinNotificationDetails iOSPlatformChannelSpecifics =
        DarwinNotificationDetails();
    const NotificationDetails platformChannelSpecifics = NotificationDetails(
      android: androidPlatformChannelSpecifics,
      iOS: iOSPlatformChannelSpecifics,
    );

    await flutterLocalNotificationsPlugin.show(
      0, // ID notifikasi
      message.notification?.title,
      message.notification?.body,
      platformChannelSpecifics,
      payload: 'item_id_123', // Payload yang bisa Anda gunakan saat notifikasi di-tap
    );
  }

  // ... (metode build lainnya)
}

Penting untuk Android: Anda perlu membuat channel notifikasi di AndroidManifest.xml atau di kode Kotlin/Java Anda jika ingin kustomisasi lebih lanjut. Untuk tujuan ini, ID channel high_importance_channel akan digunakan.

Langkah 4: Mengirim Push Notification

Setelah setup di aplikasi Flutter, kini saatnya mengirim notifikasi.

4.1 Mengirim Melalui Firebase Console

Ini cara termudah untuk menguji notifikasi Anda:

1. Buka Firebase Console.
2. Pilih proyek Anda.
3. Di navigasi kiri, pilih Engage > Messaging.
4. Klik Send your first message atau New campaign > Firebase Notification messages.
5. Isi kolom Notification title dan Notification text.
6. Di bagian Target, pilih aplikasi Flutter Anda. Anda bisa menargetkan berdasarkan paket Android atau ID bundel iOS.
7. Klik Review dan kemudian Publish.

Notifikasi seharusnya muncul di perangkat yang sudah menginstal aplikasi Anda dan memiliki token FCM yang valid.

4.2 Mengirim Melalui API (cURL/Postman)

Untuk integrasi backend, Anda akan mengirim notifikasi menggunakan FCM REST API. Anda memerlukan Server Key dari Firebase Console (Project settings > Cloud Messaging tab).

Contoh dengan cURL (ganti [FCM_TOKEN] dan [YOUR_SERVER_KEY]):

curl -X POST -H "Authorization: key=[YOUR_SERVER_KEY]" -H "Content-Type: application/json" -d '{
  "to": "[FCM_TOKEN]",
  "notification": {
    "title": "Halo dari API!",
    "body": "Ini adalah notifikasi dari backend Anda."
  },
  "data": {
    "key1": "value1",
    "key2": "value2"
  }
}' https://fcm.googleapis.com/fcm/send

Anda juga bisa menargetkan topik, bukan token spesifik:

curl -X POST -H "Authorization: key=[YOUR_SERVER_KEY]" -H "Content-Type: application/json" -d '{
  "to": "/topics/news",
  "notification": {
    "title": "Berita Terbaru",
    "body": "Baca artikel menarik kami!"
  }
}' https://fcm.googleapis.com/fcm/send

Untuk berlangganan topik di Flutter:

await FirebaseMessaging.instance.subscribeToTopic('news');

Masalah yang Sering Terjadi

Implementasi push notification seringkali menghadapi beberapa kendala. Berikut adalah beberapa masalah umum dan cara mengatasinya:

1. Notifikasi Tidak Muncul di iOS

Gejala: Notifikasi berfungsi di Android tetapi tidak di iOS.

Penyebab: Seringkali terkait dengan konfigurasi Xcode atau sertifikat APNs (Apple Push Notification service).

Solusi:

• Pastikan Anda telah menambahkan Push Notifications dan Background Modes (Remote notifications) di Signing & Capabilities Xcode.
• Periksa provisioning profile Anda. Pastikan itu memiliki kemampuan push notification. Untuk aplikasi yang sedang dikembangkan, biasanya menggunakan provisioning profile pengembangan.
• Pastikan GoogleService-Info.plist ada di ios/Runner/ dan ditambahkan ke target aplikasi Anda.
• Uji di perangkat fisik, bukan simulator iOS, karena simulator tidak mendukung push notification.
• Pastikan di AppDelegate.swift, FirebaseApp.configure() dipanggil.

2. Notifikasi Tidak Muncul Saat Aplikasi Ditutup (Terminated) atau di Background

Gejala: Notifikasi hanya muncul saat aplikasi di foreground.

Penyebab: Handler background/terminated tidak diatur dengan benar atau ada masalah dengan eksekusi kode di latar belakang.

Solusi:

• Pastikan _firebaseMessagingBackgroundHandler didefinisikan sebagai fungsi top-level (di luar kelas manapun) dan dipanggil di main() sebelum runApp().
• Untuk iOS, pastikan Background Modes > Remote notifications dicentang di Xcode.
• Pada Android 12+, mungkin ada batasan pada pekerjaan latar belakang. Namun, FCM secara umum cukup andal. Pastikan tidak ada pengecualian yang tidak tertangkap di handler background Anda.
• Untuk testing di iOS saat aplikasi terminated, pastikan Anda memulai aplikasi secara manual dari ikonnya sekali setelah instalasi, kemudian tutup aplikasi (swipe up dari app switcher) dan kirim notifikasi.

3. Token FCM Tidak Diterima atau Selalu Null

Gejala: FirebaseMessaging.instance.getToken() mengembalikan null atau terjadi error.

Penyebab: Inisialisasi Firebase gagal, izin belum diberikan, atau masalah koneksi.

Solusi:

• Pastikan await Firebase.initializeApp(); dipanggil dan berhasil di main().
• Pastikan Anda telah meminta izin notifikasi dengan messaging.requestPermission() dan pengguna telah memberikannya.
• Periksa log konsol untuk error terkait Firebase.
• Pastikan perangkat memiliki koneksi internet yang stabil.

4. Notifikasi Terlihat Berbeda di Berbagai Platform

Gejala: Notifikasi memiliki gaya atau perilaku yang tidak konsisten antara Android dan iOS.

Penyebab: Platform native memiliki cara yang berbeda dalam menampilkan notifikasi.

Solusi:

• Gunakan flutter_local_notifications untuk mengontrol tampilan notifikasi di foreground dengan lebih baik, terutama di Android yang memungkinkan kustomisasi channel notifikasi.
• Untuk notifikasi dari FCM Console, ada opsi untuk menyesuaikan notifikasi per platform.
• Pahami perbedaan antara Notification Message dan Data Message, dan gunakan yang paling sesuai dengan kebutuhan Anda. Notification messages memiliki batasan kustomisasi tampilan, sedangkan data messages memberi Anda kontrol penuh.

Pengalaman dan Pertimbangan Praktis

Setelah implementasi dasar, ada beberapa pertimbangan yang muncul dalam penggunaan push notification di dunia nyata:

1. Data Message vs. Notification Message

• Notification Message (FCM Console): Ideal untuk notifikasi sederhana seperti “Anda punya pesan baru” atau “Update aplikasi tersedia”. FCM menangani semua tampilan. Kekurangannya, kontrol aplikasi terhadap notifikasi terbatas (misalnya, tidak bisa langsung memicu logika kompleks sebelum ditampilkan).
• Data Message (Custom Backend): Lebih powerful untuk skenario yang membutuhkan logika aplikasi yang lebih dalam. Misalnya, aplikasi chat yang perlu memperbarui state internal atau menampilkan notifikasi dengan tata letak kustom. Dengan data message, Anda menerima payload data di handler background, memprosesnya, dan kemudian jika diperlukan, menampilkan notifikasi lokal menggunakan flutter_local_notifications.
• Kombinasi: Anda bisa mengirim notifikasi yang berisi bagian notification dan data. Bagian notification akan ditangani oleh sistem operasi untuk tampilan, sementara bagian data akan diterima oleh aplikasi untuk pemrosesan lebih lanjut.

2. Strategi Penanganan Saat Aplikasi Dibuka dari Notifikasi

Ketika pengguna menekan notifikasi, aplikasi Anda perlu tahu tindakan apa yang harus dilakukan. Misalnya, membuka halaman spesifik atau menampilkan detail item. Gunakan data payload yang dikirim bersama notifikasi (baik dari getInitialMessage atau onMessageOpenedApp) untuk mengarahkan pengguna ke tujuan yang relevan.

// Contoh penanganan navigasi
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print('Notifikasi dibuka: ${message.data}');
  final String? screenToNavigate = message.data['screen'];
  if (screenToNavigate == '/chat') {
    Navigator.pushNamed(context, '/chat', arguments: message.data['chat_id']);
  }
});

3. Pengelolaan Token FCM di Backend

Token FCM setiap perangkat bisa berubah. Anda perlu memiliki mekanisme di backend untuk:

• Menyimpan token FCM saat pengguna login atau saat token diperbarui (onTokenRefresh).
• Menghapus token yang tidak valid (misalnya, jika aplikasi dihapus dari perangkat). FCM akan memberi tahu Anda token mana yang tidak lagi valid saat Anda mencoba mengirim notifikasi.

4. Biaya dan Skalabilitas

FCM gratis untuk mengirim notifikasi, yang menjadikannya pilihan yang sangat baik untuk sebagian besar aplikasi. Skalabilitasnya juga sangat tinggi, mampu mengirim miliaran pesan per hari. Namun, biaya bisa muncul jika Anda menggunakan layanan komputasi cloud (seperti Cloud Functions) untuk memicu pengiriman notifikasi dari backend Anda.

5. Pengujian Lintas Platform

Selalu uji push notification di perangkat Android dan iOS fisik. Simulator tidak sepenuhnya mereplikasi perilaku perangkat keras dan sistem operasi yang sebenarnya, terutama untuk fitur seperti push notification.

6. Kustomisasi Notifikasi

Untuk pengalaman pengguna yang lebih baik, pertimbangkan kustomisasi:

• Android Notification Channels: Memungkinkan pengguna mengelola preferensi notifikasi (suara, getaran) untuk berbagai jenis notifikasi.
• Custom Icons & Sounds: Gunakan ikon dan suara kustom untuk notifikasi Anda agar lebih dikenali.

Kesimpulan

Mengintegrasikan push notification di aplikasi Flutter Anda adalah langkah penting untuk meningkatkan keterlibatan pengguna. Meskipun prosesnya melibatkan setup di Firebase dan konfigurasi di sisi native, plugin firebase_messaging dan flutter_local_notifications membuat proses ini jauh lebih mudah dan terpadu. Dengan mengikuti panduan ini, Anda kini memiliki fondasi yang kuat untuk mengirim notifikasi yang efektif, baik itu pesan sederhana dari konsol Firebase atau payload data kompleks dari backend Anda.

Ingatlah untuk selalu menguji secara menyeluruh di berbagai skenario (aplikasi foreground, background, terminated) dan di kedua platform (Android dan iOS) untuk memastikan pengalaman pengguna yang konsisten dan andal.

TAGS: Flutter, Push Notification, Firebase, FCM, Android, iOS, Developer Tools, Mobile Development, Tutorial, Coding

---

Baca Juga

• Developer Tools Terbaik untuk Programmer Modern