Belajar React Native - Push Notifications & Background Task

#Pendahuluan

Notifikasi adalah salah satu cara aplikasi kembali hadir di layar user tanpa mereka membukanya. Tapi membangun push notification yang benar tidak sekadar install library: ada dua ekosistem berbeda, alur permission, dan handler untuk tiga kondisi aplikasi.

Episode 11 membahas push notifications secara menyeluruh: Firebase Cloud Messaging untuk Android dan APNs untuk iOS, alur permission dengan notifee, notification handler di foreground, background, dan app quit, lalu background task dengan react-native-background-fetch serta strategi yang hemat baterai.

#Dasar Push Notification

#FCM dan APNs

Setiap platform punya layanan push sendiri: FCM (Firebase Cloud Messaging) untuk Android dan APNs (Apple Push Notification service) untuk iOS. Pesan push dikirim dari server ke layanan ini, lalu diteruskan ke perangkat. Untuk memudahkan satu API, gunakan notifee yang membungkus keduanya:

npm install @notifee/react-native

#Token Perangkat

Saat aplikasi pertama kali berjalan, platform memberikan device token — identitas perangkat di layanan push. Token ini dikirim ke server kalian agar server tahu ke mana notifikasi dikirim. Token bisa berubah, jadi selalu perbarui di server saat aplikasi mendeteksi token baru.

#Meminta Permission

#Alur Permission di Android dan iOS

iOS wajib meminta izin eksplisit sebelum menampilkan notifikasi. Android 13+ juga meminta izin runtime. Alurnya: cek status, minta izin saat user melakukan aksi yang relevan, lalu jelaskan kenapa notifikasi dibutuhkan.

Meminta izin notifikasi

import notifee from "@notifee/react-native";
 
async function mintaIzin() {
  const settings = await notifee.requestPermission();
  return settings.authorizationStatus >= 1;
}

Panggil notifee.requestPermission() saat user memilih aksi yang masuk akal — misalnya menekan tombol "Aktifkan pengingat" — bukan langsung saat aplikasi dibuka. Hasil authorizationStatus menentukan apakah notifikasi diizinkan, ditolak, atau masih sementara.

#Notification Handler

#Tiga Kondisi Aplikasi

Notifikasi perlu ditangani berbeda tergantung kondisi aplikasi:

• Foreground: aplikasi tampil — tampilkan sebagai banner atau tangani diam-diam.
• Background: aplikasi di latar belakang tapi masih hidup — banner sistem muncul otomatis.
• Quit: aplikasi ditutup — notifikasi membuka aplikasi saat diketuk.

Handler notifikasi di foreground

import notifee, { EventType } from "@notifee/react-native";
 
notifee.onForegroundEvent(({ type, detail }) => {
  if (type === EventType.PRESS) {
    bukaLayarNotifikasi(detail.notification.data);
  }
});

detail.notification.data membawa payload yang dikirim server — pakai untuk navigasi ke layar yang benar. Data ini juga tersedia di event background untuk kondisi aplikasi di latar belakang.

#Membuat Channel Notifikasi di Android

Android memakai channel untuk mengelompokkan notifikasi. Buat channel saat inisialisasi agar notifikasi berjalan di versi Android modern:

Membuat channel Android

import notifee from "@notifee/react-native";
 
async function buatChannel() {
  await notifee.createChannel({
    id: "default",
    name: "Notifikasi Umum",
  });
}

#Background Task

#Background Fetch dengan Waktu

Tidak semua pekerjaan bisa menunggu user membuka aplikasi. react-native-background-fetch memungkinkan aplikasi menjalankan tugas singkat di latar belakang pada jadwal yang ditentukan sistem:

npm install react-native-background-fetch

Menjadwalkan background fetch

import BackgroundFetch from "react-native-background-fetch";
 
async function initBackground() {
  await BackgroundFetch.configure(
    {
      minimumFetchInterval: 15,
      stopOnTerminate: false,
      enableHeadless: true,
    },
    async (taskId) => {
      await sinkronData();
      BackgroundFetch.finish(taskId);
    }
  );
}

Sistem operasi menentukan kapan tugas dijalankan — minimumFetchInterval hanyalah batas bawah, bukan jaminan. Jangan pernah lupa memanggil BackgroundFetch.finish(taskId), jika tidak OS akan menganggap tugas menggantung.

#Headless Task

Dengan enableHeadless: true, tugas tetap berjalan meski aplikasi dihentikan user. Headless task memakai entry point terpisah agar JavaScript bisa dieksekusi tanpa UI. Pastikan tugas headless singkat dan tidak menyentuh state UI.

#Strategi Hemat Baterai

#Prinsip Kerja yang Bertanggung Jawab

Background task dan notifikasi adalah konsumen baterai yang serius. Beberapa prinsip penting:

• Sedikit dan pendek: jangan menjalankan background fetch lebih sering dari kebutuhan.
• Batch request: gabungkan sinkronisasi dalam satu kesempatan, bukan berkali-kali.
• Manfaatkan ketentuan OS: iOS dan Android sudah mengatur jadwal dan prioritas — percayai sistem.
• Hindari notifikasi spam: notifikasi yang sering muncul membuat user menolak permission dan uninstall.

#Penutup

Episode 11 menghadirkan aplikasi di luar layar: push notification dengan FCM dan APNs via notifee, alur permission yang benar, handler untuk foreground, background, dan quit, lalu background fetch yang hemat baterai.

Inti yang harus dibawa pulang:

• FCM untuk Android dan APNs untuk iOS; notifee menyatukan keduanya.
• Permission diminta pada momen yang relevan, bukan saat splash screen.
• Tangani notifikasi untuk foreground, background, dan kondisi aplikasi ditutup.
• BackgroundFetch.finish wajib dipanggil di akhir tugas.
• Jadwal background fetch ditentukan OS; minimumFetchInterval hanya batas bawah.
• Konsumsi baterai yang wajar menjaga aplikasi tetap dipakai.

Di episode 12 selanjutnya kita akan membahas media, camera, dan permissions: react-native-vision-camera, image picker, resize dan kompresi gambar, manajemen permission dengan react-native-permissions, serta UX saat izin ditolak.