Panduan Cepat Push Notification dengan Expo-Notifications dan Firebase

Push notification adalah cara yang ampuh untuk berinteraksi dengan pengguna aplikasi Anda, memberikan pembaruan, pengingat, dan promosi tepat waktu. Dengan Expo dan Firebase, mengimplementasikan push notification di aplikasi React Native Anda menjadi lebih mudah. Panduan ini akan memandu Anda melalui langkah-langkah penting untuk mengatur push notification menggunakan Expo-Notifications dan Firebase Cloud Messaging (FCM).

Mengapa Menggunakan Expo-Notifications dan Firebase?

• Expo: Expo menyediakan lingkungan dan alat yang disederhanakan untuk membangun aplikasi React Native, menghilangkan banyak kompleksitas konfigurasi.
• Firebase Cloud Messaging (FCM): FCM adalah solusi push notification lintas platform yang andal dan gratis dari Google.

Kombinasi ini menawarkan cara yang efisien dan efektif untuk mengirimkan push notification ke pengguna iOS dan Android.

Prasyarat

1. Node.js dan npm atau Yarn: Pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) atau Yarn di sistem Anda.
2. Akun Firebase: Anda memerlukan akun Google dan proyek Firebase. Jika belum punya, buatlah secara gratis di firebase.google.com.
3. Akun Expo: Anda perlu memiliki akun Expo. Anda dapat mendaftar secara gratis di expo.dev.
4. Expo CLI: Instal Expo CLI secara global dengan menjalankan perintah: npm install -g expo-cli atau yarn global add expo-cli.
5. Expo Go (Opsional): Untuk pengujian, unduh aplikasi Expo Go di perangkat iOS atau Android Anda. Atau, Anda dapat menggunakan emulator.

Langkah 1: Membuat Proyek Expo Baru

Mulailah dengan membuat proyek Expo baru menggunakan Expo CLI:

expo init my-push-app

Pilih templat yang sesuai (misalnya, blank atau tabs) dan navigasikan ke direktori proyek:

cd my-push-app

Langkah 2: Menginstal Dependensi yang Diperlukan

Instal paket expo-notifications dan firebase menggunakan npm atau Yarn:

expo install expo-notifications firebase

Atau dengan Yarn:

yarn add expo-notifications firebase

Langkah 3: Mengonfigurasi Firebase

1. Buat Proyek Firebase: Buka konsol Firebase dan buat proyek baru.
2. Tambahkan Aplikasi ke Proyek Firebase:
   • Pilih ikon Android dan ikuti petunjuk untuk menambahkan aplikasi Android. Anda akan memerlukan nama paket aplikasi Anda (misalnya, com.example.myapp). Ini bisa di ubah nanti di `app.json` Expo Anda.
   • Ulangi proses untuk aplikasi iOS jika Anda menargetkan iOS. Anda akan memerlukan Bundle Identifier aplikasi Anda (misalnya, com.example.myapp). Ini bisa di ubah nanti di `app.json` Expo Anda.
3. Unduh File Konfigurasi:
   • Untuk Android, unduh file google-services.json dan letakkan di direktori root proyek Expo Anda.
   • Untuk iOS, unduh file GoogleService-Info.plist dan letakkan di direktori root proyek Expo Anda.
4. Mengaktifkan Cloud Messaging: Pastikan Cloud Messaging diaktifkan di konsol Firebase. Buka Project settings -> Cloud Messaging.

Langkah 4: Mengonfigurasi Expo untuk Firebase

Anda perlu mengonfigurasi Expo agar menggunakan file konfigurasi Firebase Anda. Tambahkan beberapa konfigurasi ke file app.json atau app.config.js proyek Anda.

Contoh app.json:

    
{
  "expo": {
    "name": "my-push-app",
    "slug": "my-push-app",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "android": {
      "package": "com.example.myapp",
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "bundleIdentifier": "com.example.myapp",
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/notification-icon.png",
          "color": "#ffffff",
          "sounds": [
            "./assets/notification-sound.wav"
          ]
        }
      ]
    ]
  }
}
    
  

Catatan: Pastikan untuk mengganti com.example.myapp dengan nama paket dan ID bundle yang sesuai dengan aplikasi Anda.

Catatan: Pastikan untuk menambahkan lokasi gambar icon notifikasi dan suara notifikasi jika diperlukan. Pastikan file-file tersebut ada di dalam direktori proyek Anda

Langkah 5: Menginisialisasi Firebase di Aplikasi Anda

Buat file (misalnya, firebase.js) untuk menginisialisasi Firebase. Karena file konfigurasi berbeda antara android, ios, dan web, kita perlu menggunakan teknik yang berbeda

Contoh firebase.js:

    
import { initializeApp, getApp, getApps } from 'firebase/app';
import { getMessaging } from "firebase/messaging";
import Constants from 'expo-constants';

// Optionally add the SDKs that you want to use
// import "firebase/analytics";
// import "firebase/auth";
// import "firebase/database";
// import "firebase/firestore";
// import "firebase/functions";
// import "firebase/storage";

let app;

const firebaseConfig = {
  apiKey: Constants.manifest?.extra?.apiKey,
  authDomain: Constants.manifest?.extra?.authDomain,
  projectId: Constants.manifest?.extra?.projectId,
  storageBucket: Constants.manifest?.extra?.storageBucket,
  messagingSenderId: Constants.manifest?.extra?.messagingSenderId,
  appId: Constants.manifest?.extra?.appId,
  measurementId: Constants.manifest?.extra?.measurementId
};

if (getApps().length === 0) {
  app = initializeApp(firebaseConfig);
} else {
  app = getApp();
}


const messaging = getMessaging(app);

export { messaging, app };

    
  

Perhatikan penggunaan Constants.manifest?.extra untuk mendapatkan konfigurasi firebase. Ini akan kita definisikan di app.config.js atau app.json

Contoh app.config.js:

    
import 'dotenv/config';

export default ({ config }) => ({
  ...config,
  extra: {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
  }
});
    
  

Pastikan untuk menginstall package dotenv : yarn add dotenv

Buat file .env di root direktori Anda, dan tambahkan konfigurasi firebase Anda:

    
API_KEY="YOUR_API_KEY"
AUTH_DOMAIN="YOUR_AUTH_DOMAIN"
PROJECT_ID="YOUR_PROJECT_ID"
STORAGE_BUCKET="YOUR_STORAGE_BUCKET"
MESSAGING_SENDER_ID="YOUR_MESSAGING_SENDER_ID"
APP_ID="YOUR_APP_ID"
MEASUREMENT_ID="YOUR_MEASUREMENT_ID"
    
  

Catatan: Ganti placeholder dengan kredensial Firebase Anda.

Langkah 6: Meminta Izin Push Notification

Sebelum aplikasi Anda dapat menerima push notification, Anda perlu meminta izin dari pengguna. Berikut adalah contoh cara melakukannya di komponen React Native Anda:

    
import React, { useState, useEffect, useRef } from 'react';
import { Text, View, Platform } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { messaging } from './firebase';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

export default function App() {
  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotifications().then(token => setExpoPushToken(token));

    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
    });

    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);

  return (
    
      Your expo push token: {expoPushToken}
      
        Title: {notification && notification.request.content.title} 
        Body: {notification && notification.request.content.body}
        Data: {notification && JSON.stringify(notification.request.content.data)}
      
      
    
  );
}

async function registerForPushNotifications() {
  let token;

  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }

  if (Device.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = await Notifications.getExpoPushTokenAsync({
      projectId: Constants.expoConfig?.extra?.eas.projectId,
    });
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

  return token;
}
    
  

Kode di atas:

• Meminta izin push notification menggunakan Notifications.requestPermissionsAsync().
• Mendapatkan token push notification Expo menggunakan Notifications.getExpoPushTokenAsync().
• Mengembalikan token, yang dapat Anda gunakan untuk mengirim push notification ke perangkat tertentu.

Jangan lupa tambahkan projectId ke app.config.js:

    
import 'dotenv/config';

export default ({ config }) => ({
  ...config,
  extra: {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID,
    eas: {
      projectId: process.env.EAS_PROJECT_ID
    }
  }
});
    
  

Dan tambahkan ke .env:

    
EAS_PROJECT_ID="YOUR_EAS_PROJECT_ID"
    
  

Langkah 7: Mendapatkan Token FCM

Jika Anda berencana mengirim push notification menggunakan Firebase Cloud Messaging (FCM), Anda perlu mendapatkan token FCM untuk perangkat tersebut. Meskipun kita akan menggunakan token Expo untuk mengirim notifikasi, lebih baik mendapatkan token FCM karena lebih mudah di masa mendatang ketika kita akan mengirim notifikasi yang dibuat khusus

    
import React, { useState, useEffect, useRef } from 'react';
import { Text, View, Platform } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { messaging } from './firebase';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

export default function App() {
  const [expoPushToken, setExpoPushToken] = useState('');
  const [fcmToken, setFcmToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotifications().then(token => setExpoPushToken(token));
    getFcmToken();

    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
    });

    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);

  return (
    
      Your expo push token: {expoPushToken}
      Your fcm token: {fcmToken}
      
        Title: {notification && notification.request.content.title} 
        Body: {notification && notification.request.content.body}
        Data: {notification && JSON.stringify(notification.request.content.data)}
      
      
    
  );
}

async function registerForPushNotifications() {
  let token;

  if (Platform.OS === 'android') {
    await Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }

  if (Device.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = await Notifications.getExpoPushTokenAsync({
      projectId: Constants.expoConfig?.extra?.eas.projectId,
    });
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

  return token;
}

async function getFcmToken() {
  let token;
  try {
    token = await messaging.getToken();
    console.log('FCM Token:', token);
    setFcmToken(token);
  } catch (error) {
    console.error('Error getting FCM token:', error);
  }

  return token;
}
    
  

Langkah 8: Mengirim Push Notification

Ada dua cara utama untuk mengirim push notification dengan Expo dan Firebase:

1. Menggunakan Layanan Push Expo: Ini adalah cara termudah untuk memulai, terutama selama pengembangan.
2. Menggunakan Firebase Cloud Messaging (FCM): Ini lebih fleksibel dan cocok untuk aplikasi produksi.

Mengirim Push Notification dengan Layanan Push Expo

Expo menyediakan API sederhana untuk mengirim push notification. Anda dapat mengirim notifikasi ke satu perangkat atau sekelompok perangkat.

Berikut adalah contoh cara mengirim push notification menggunakan Node.js:

    
const { Expo } = require('expo-server-sdk');

// Buat instance baru Expo
let expo = new Expo();

// Token push yang ingin Anda kirimkan notifikasi
let pushToken = 'YOUR_EXPO_PUSH_TOKEN'; // Ganti dengan token yang valid

// Periksa apakah token push adalah format yang valid
if (!Expo.isExpoPushToken(pushToken)) {
  console.error(`Token push ${pushToken} tidak valid.`);
  return;
}

// Buat pesan yang ingin Anda kirimkan ke perangkat
let message = {
  to: pushToken,
  sound: 'default',
  title: 'Notifikasi Judul',
  body: 'Notifikasi Body',
  data: { withSome: 'data' },
};

async function sendPushNotification(message) {
  try {
    let ticketChunk = await expo.sendPushNotificationsAsync([message]);
    console.log(ticketChunk);
  } catch (error) {
    console.error(error);
  }
}

sendPushNotification(message);
    
  

Catatan:

• Ganti YOUR_EXPO_PUSH_TOKEN dengan token Expo yang Anda dapatkan dari perangkat Anda.
• Pastikan untuk menginstal expo-server-sdk : yarn add expo-server-sdk

Anda dapat menjalankan kode ini menggunakan Node.js untuk mengirim push notification ke perangkat Anda.

Mengirim Push Notification dengan Firebase Cloud Messaging (FCM)

Untuk menggunakan FCM, Anda perlu mengaktifkan Firebase Cloud Messaging API di konsol Firebase.

Berikut adalah contoh cara mengirim push notification menggunakan Node.js dan Firebase Admin SDK:

    
const admin = require('firebase-admin');

// Inisialisasi Firebase Admin SDK
const serviceAccount = require('./path/to/your/serviceAccountKey.json'); // Ganti dengan path ke file akun layanan Anda

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

// Token FCM yang ingin Anda kirimkan notifikasi
const registrationToken = 'YOUR_FCM_TOKEN'; // Ganti dengan token FCM yang valid

// Buat pesan yang ingin Anda kirimkan ke perangkat
const message = {
  notification: {
    title: 'Notifikasi Judul',
    body: 'Notifikasi Body',
  },
  data: {
    key1: 'value1',
    key2: 'value2',
  },
  token: registrationToken,
};

// Kirim pesan menggunakan Firebase Admin SDK
admin.messaging().send(message)
  .then((response) => {
    console.log('Pesan berhasil dikirim:', response);
  })
  .catch((error) => {
    console.log('Error mengirim pesan:', error);
  });
    
  

Catatan:

• Ganti YOUR_FCM_TOKEN dengan token FCM yang Anda dapatkan dari perangkat Anda.
• Ganti ./path/to/your/serviceAccountKey.json dengan path ke file akun layanan Anda. Anda dapat mengunduh file ini dari konsol Firebase di Project settings -> Service accounts.
• Pastikan untuk menginstal firebase-admin : yarn add firebase-admin

Kode ini menggunakan Firebase Admin SDK untuk mengirim push notification ke perangkat yang ditentukan. File akun layanan menyediakan kredensial yang diperlukan untuk mengautentikasi dengan Firebase.

Langkah 9: Menangani Push Notification di Aplikasi Anda

Setelah Anda mengirim push notification, Anda perlu menanganinya di aplikasi Anda. Expo-Notifications menyediakan API untuk menangani notifikasi yang diterima saat aplikasi berada di latar depan, latar belakang, atau ditutup.

Dalam contoh di atas, kita telah menggunakan:

• Notifications.addNotificationReceivedListener: Listener ini dipanggil saat notifikasi diterima saat aplikasi berjalan di latar depan.
• Notifications.addNotificationResponseReceivedListener: Listener ini dipanggil saat pengguna menekan notifikasi.

Anda dapat menggunakan listener ini untuk memperbarui UI aplikasi Anda, menavigasi ke layar tertentu, atau melakukan tindakan lain berdasarkan konten notifikasi.

Praktik Terbaik untuk Push Notification

• Meminta Izin dengan Tepat: Jelaskan kepada pengguna mengapa Anda memerlukan izin push notification sebelum memintanya.
• Kirim Notifikasi yang Relevan: Kirim notifikasi yang bermanfaat dan relevan dengan pengguna. Hindari mengirim spam atau notifikasi yang mengganggu.
• Personalisasi Notifikasi: Personalisasikan notifikasi Anda untuk meningkatkan keterlibatan pengguna.
• Uji Notifikasi Anda: Uji notifikasi Anda secara menyeluruh sebelum mengirimkannya ke pengguna di produksi.
• Pantau Metrik Notifikasi: Pantau metrik notifikasi Anda (misalnya, tingkat buka, tingkat klik-tayang) untuk mengoptimalkan kampanye notifikasi Anda.
• Pertimbangkan Pembatasan Frekuensi: Hindari membanjiri pengguna dengan terlalu banyak notifikasi dalam waktu singkat.

Pemecahan Masalah

• Notifikasi Tidak Diterima:
  • Pastikan token push Anda valid.
  • Pastikan konfigurasi Firebase Anda sudah benar.
  • Periksa apakah Cloud Messaging diaktifkan di konsol Firebase.
  • Periksa apakah perangkat Anda memiliki koneksi internet.
• Izin Push Notification Ditolak:
  • Berikan penjelasan yang jelas dan menarik mengapa aplikasi Anda memerlukan izin push notification.
  • Cobalah untuk meminta izin lagi di lain waktu.

Kesimpulan

Dengan panduan ini, Anda seharusnya sudah dapat menyiapkan push notification di aplikasi React Native Anda menggunakan Expo-Notifications dan Firebase. Ingatlah untuk menguji notifikasi Anda secara menyeluruh dan mengikuti praktik terbaik untuk memastikan pengalaman pengguna yang positif.

Push notification adalah alat yang ampuh, tetapi harus digunakan dengan bijak. Dengan merencanakan strategi notifikasi Anda dengan hati-hati dan memantau hasilnya, Anda dapat meningkatkan keterlibatan pengguna dan meningkatkan kesuksesan aplikasi Anda.

Sumber Daya Tambahan

• Dokumentasi Expo Push Notifications
• Dokumentasi Firebase Cloud Messaging