Belajar Capacitorjs - Push & Local Notifications

#Pendahuluan

Setelah di episode 7 kita menguasai Geolocation dan Preferences, pada episode ini kita masuk ke salah satu fitur mobile paling powerful: push notification dan notifikasi lokal. Notifikasi adalah cara paling efektif untuk menarik user kembali ke aplikasi — dan di mobile, notifikasi jauh lebih efektif daripada email atau in-app banner.

Mengapa push notification penting? Karena aplikasi mobile yang tidak punya notifikasi cenderung dilupakan user. Push notification memungkinkan kalian mengirim pesan real-time ke perangkat user bahkan saat aplikasi tidak aktif.

#Push Notification: Konsep Dasar

100%

Dua layanan push notification utama:

FCM (Firebase Cloud Messaging) — untuk Android. Gratis, terintegrasi dengan Firebase.
APNs (Apple Push Notification service) — untuk iOS. Membutuhkan Apple Developer account.

Capacitor menggunakan @capacitor/push-notifications yang menjembatani kedua layanan ini.

#Setup Push Notification

#Instalasi

Install push notifications plugin

npm install @capacitor/push-notifications
npx cap sync

#Konfigurasi Firebase (Android)

Buat project di Firebase Console.
Tambahkan Android app dengan package name sesuai appId kalian.
Download google-services.json dan taruh di android/app/.
Tambahkan Firebase dependencies di android/build.gradle dan android/app/build.gradle.

#Konfigurasi APNs (iOS)

Aktifkan Push Notification capability di Xcode.
Buat APNs key di Apple Developer Portal.
Upload key ke Firebase Console untuk mengelola iOS dari satu tempat.

#Registrasi Token

Registrasi push notification

import { PushNotifications } from '@capacitor/push-notifications';
 
async function registerPush() {
  // Minta permission
  const permission = await PushNotifications.requestPermissions();
  if (permission.receive !== 'granted') {
    console.log('Push notification permission denied');
    return;
  }
 
  // Register untuk push
  await PushNotifications.register();
 
  // Dapatkan token
  PushNotifications.addListener('registration', (token) => {
    console.log('Push token:', token.value);
    // Kirim token ke server kalian
    sendTokenToServer(token.value);
  });
 
  // Handle error
  PushNotifications.addListener('registrationError', (err) => {
    console.error('Registration error:', err.error);
  });
}

#Handling Notifikasi

Handle push notification

import { PushNotifications } from '@capacitor/push-notifications';
 
// Saat notifikasi diterima (app di foreground)
PushNotifications.addListener('pushNotificationReceived', (notification) => {
  console.log('Notification received:', notification.title, notification.body);
  // Tampilkan in-app banner atau update badge
});
 
// Saat user tap notifikasi
PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
  const data = action.notification.data;
  console.log('Notification tapped:', data);
 
  // Navigasi ke konten spesifik
  if (data.articleId) {
    window.location.href = `/article/${data.articleId}`;
  }
});

#Local Notifications

#Instalasi

Install local notifications plugin

npm install @capacitor/local-notifications
npx cap sync

#Mengirim Notifikasi Lokal

Kirim notifikasi lokal

import { LocalNotifications } from '@capacitor/local-notifications';
 
async function scheduleNotification() {
  await LocalNotifications.requestPermissions();
 
  await LocalNotifications.schedule({
    notifications: [
      {
        title: 'Waktunya minum air!',
        body: 'Jangan lupa hidrasi setiap 2 jam.',
        id: 1,
        schedule: { at: new Date(Date.now() + 7200000) }, // 2 jam lagi
        actionTypeId: 'HYDRATION_REMINDER',
        extra: { reminderType: 'hydration' },
      },
    ],
  });
}

#Notifikasi Berulang

Notifikasi berulang harian

import { LocalNotifications } from '@capacitor/local-notifications';
 
async function scheduleDailyReminder() {
  await LocalNotifications.schedule({
    notifications: [
      {
        title: 'Reminder Harian',
        body: 'Buka app untuk cek progress hari ini.',
        id: 100,
        schedule: {
          every: { weekday: 1, weekday: 2, weekday: 3, weekday: 4, weekday: 5 },
          at: new Date(new Date().setHours(9, 0, 0, 0)), // 09:00 setiap hari kerja
        },
      },
    ],
  });
}

#Aksi Tombol

Notifikasi dengan aksi tombol

import { LocalNotifications } from '@capacitor/local-notifications';
 
await LocalNotifications.registerActionTypes({
  types: [
    {
      id: 'TASK_REMINDER',
      actions: [
        { id: 'complete', title: 'Selesaikan', foreground: true },
        { id: 'snooze', title: 'Tunda 15 menit', foreground: false },
      ],
    },
  ],
});
 
// Kirim notifikasi dengan aksi
await LocalNotifications.schedule({
  notifications: [
    {
      title: 'Task belum selesai',
      body: 'Kerjakan "Review PR" sebelum deadline.',
      id: 200,
      actionTypeId: 'TASK_REMINDER',
      schedule: { at: new Date(Date.now() + 3600000) },
    },
  ],
});

#Test Push End-to-End

Untuk testing push notification:

Jalankan app di emulator/perangkat nyata (push tidak work di simulator).
Dapatkan FCM token dari PushNotifications.addListener('registration').
Kirim test payload dari Firebase Console → Cloud Messaging → Send your first message.
Paste token FCM sebagai recipient target.

Warning

Push notification tidak bisa diuji di iOS Simulator. Gunakan perangkat fisik atau TestFlight untuk testing iOS. Android emulator mendukung push notification.

#Penutup

Pada episode 8 ini, kalian telah memahami:

Push notification menggunakan FCM (Android) dan APNs (iOS).
Registrasi token, handling foreground dan tap-to-navigate.
Local notifications untuk pengingat terjadwal dan aksi tombol.
Test push end-to-end dari Firebase Console.

Di episode 9 selanjutnya, kita akan membahas Deep Links, Universal Links, dan App State — custom scheme vs App Links vs Universal Links, lifecycle events, dan cara membuka konten spesifik dari link eksternal. Sampai jumpa!