React Native'de Firebase Cloud Messaging ile Push Notification Ekleme

React Native uygulamanıza push notification eklemek, kullanıcı etkileşimini artırmanın en etkili yollarından biridir. Firebase Cloud Messaging (FCM), Android ve iOS için ücretsiz ve güvenilir bir bildirim altyapısı sunar. Bu yazıda, React Native projenize FCM'yi adım adım nasıl entegre edeceğinizi, token yönetimini ve bildirimleri nasıl işleyeceğinizi öğreneceksiniz.

React Native ve Firebase Cloud Messaging: Temel Kavramlar

FCM, Google'ın bulut tabanlı mesajlaşma hizmetidir. React Native uygulamanızda push notification göndermek için iki ana bileşen gereklidir: Firebase projesi ve React Native istemci kütüphanesi. FCM, cihaz token'ları üzerinden çalışır; sunucu tarafından gönderilen bildirimler, Google sunucuları üzerinden hedef cihaza iletilir.

Adım 1: Firebase Projesi Oluşturma ve Yapılandırma

İlk olarak Firebase Console'a gidip yeni bir proje oluşturun. Proje adını girin, Google Analytics tercihinizi yapın ve projeyi oluşturun. Ardından:

• Android için: Firebase'e Android uygulaması ekleyin. Package name (örn. com.example.app) girin, google-services.json dosyasını indirip android/app/ klasörüne koyun. android/build.gradle ve android/app/build.gradle dosyalarına Firebase eklentilerini ekleyin.
• iOS için: Firebase'e iOS uygulaması ekleyin. Bundle ID (örn. com.example.app) girin, GoogleService-Info.plist dosyasını indirip Xcode projenize ekleyin. Podfile'a Firebase/Messaging pod'unu ekleyin.

Adım 2: React Native Projesine FCM Kütüphanesini Ekleme

React Native'de push notification için en popüler kütüphane @react-native-firebase/messaging 'dir. Aşağıdaki komutla yükleyin:

npm install @react-native-firebase/app @react-native-firebase/messaging

Kurulumdan sonra Android için android/build.gradle'ye Google Services eklentisini, iOS için ise cd ios && pod install komutunu çalıştırmayı unutmayın. Daha fazla bilgi için Flutter vs React Native performans karşılaştırması yazımıza göz atabilirsiniz.

Adım 3: İzin İsteme ve Token Alma

iOS için kullanıcıdan bildirim izni almak zorunludur. Android'de ise genellikle gerekmez, ancak Android 13+ için izin istemek iyi bir pratiktir. Aşağıdaki örnekte hem izin alma hem de FCM token'ı alma işlemi gösterilmiştir:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  if (enabled) {
    console.log('Bildirim izni verildi.');
  }
}

async function getFCMToken() {
  const token = await messaging().getToken();
  console.log('FCM Token:', token);
  // Token'ı sunucunuza kaydedin
}

Adım 4: Bildirimleri Alma ve İşleme

Uygulama açıkken (foreground) bildirim geldiğinde, bildirimi manuel olarak göstermeniz gerekir. Arka planda (background) veya kapalıyken (quit) bildirimler otomatik olarak işletim sistemi tarafından gösterilir. Aşağıdaki event listener'ları kullanarak bildirimleri yakalayabilirsiniz:

import { useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';

useEffect(() => {
  // Uygulama açıkken gelen bildirimler
  const unsubscribeOnMessage = messaging().onMessage(async remoteMessage => {
    console.log('Foreground message:', remoteMessage);
    // Örnek: Bildirimi lokal olarak gösterme
  });
  // Bildirime tıklanınca (uygulama arka plandan veya kapalıdan açıldığında)
  messaging().onNotificationOpenedApp(remoteMessage => {
    console.log('Notification opened:', remoteMessage);
  });
  // Uygulama kapalıyken bildirime tıklanarak açılma
  messaging().getInitialNotification().then(remoteMessage => {
    if (remoteMessage) {
      console.log('App opened from quit state:', remoteMessage);
    }
  });
  return () => unsubscribeOnMessage();
}, []);

Adım 5: Bildirim Gönderme (Sunucu Tarafı)

FCM token'ını aldıktan sonra, sunucunuzdan aşağıdaki gibi bir HTTP isteği ile bildirim gönderebilirsiniz:

POST https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=SUNUCU_ANAHTARI

{
  "to": "DEVICE_TOKEN",
  "notification": {
    "title": "Başlık",
    "body": "İçerik"
  },
  "data": {
    "key1": "değer1"
  }
}

Sunucu anahtarını Firebase Console > Project Settings > Cloud Messaging > Server key bölümünden alabilirsiniz.

Yaygın Sorunlar ve Çözümleri

• Token alamıyorum: Google Services dosyalarının doğru konumda olduğundan ve podların güncel olduğundan emin olun.
• Bildirim gelmiyor: Özellikle Android'de bildirim kanalları (Notification Channel) oluşturmayı unutmayın.
• iOS'ta bildirim çalışmıyor: AppDelegate dosyasına Firebase entegrasyonunu eklediğinizden ve push notification yeteneklerini Xcode'da açtığınızdan emin olun. Bkz. SwiftUI vs Jetpack Compose karşılaştırmamızda da benzer ayarlar anlatılıyor.

Performans İpuçları

Bildirim işleme mantığını mümkün olduğunca hafif tutun. Özellikle onMessage içinde ağır işlemler yapmaktan kaçının. Ayrıca, @react-native-firebase/messaging kütüphanesi, arka planda bildirim işleme için service worker benzeri bir yapı sunar. Daha fazla performans optimizasyonu için React Native FlatList performans optimizasyonu yazımıza da göz atabilirsiniz.

Sık Yapılan Hatalar

• Token'ı güncellememek: Token zamanla değişebilir; sunucunuzu güncel tutmak için onTokenRefresh event'ini dinleyin.
• Veri mesajı göndermemek: Bildirim mesajları kullanıcıya görünür, veri mesajları ise arka planda işlenir. İkisini birleştirerek esnek çözümler elde edebilirsiniz.

Sonuç

React Native'de Firebase Cloud Messaging ile push notification entegrasyonu, doğru adımlar izlendiğinde oldukça basittir. Token yönetimi ve bildirim işleme mantığını doğru kurduğunuzda, kullanıcılarınıza anlık bildirimler gönderebilir, uygulama etkileşimini artırabilirsiniz. Unutmayın, her platformun kendine özgü gereksinimleri vardır; iOS ve Android arasındaki farkları göz önünde bulundurun.

Sık Sorulan Sorular

React Native'de push notification için hangi kütüphane kullanılır?

En yaygın kullanılan kütüphane @react-native-firebase/messaging'dir. Firebase Cloud Messaging üzerinden Android ve iOS'a bildirim göndermeyi sağlar.

FCM token'ı neden değişir?

FCM token'ı nadiren değişir ancak uygulama yeniden yüklendiğinde, veriler silindiğinde veya belirli durumlarda yenilenebilir. Token değişimlerini onTokenRefresh event'i ile dinlemelisiniz.

iOS'ta bildirim izni nasıl alınır?

messaging().requestPermission() çağrısı ile iOS'ta bildirim izni istenir. Kullanıcı reddederse tekrar istememek için yetki durumunu kontrol etmek önemlidir.

Uygulama açıkken gelen bildirimleri nasıl gösterebilirim?

Foreground durumunda gelen bildirimler otomatik gösterilmez. onMessage event'ini dinleyerek bildirimi lokal olarak göstermek için @notifee/react-native gibi bir kütüphane kullanabilirsiniz.