React Native Push Notification Entegrasyonu: Firebase Cloud Messaging ile Adım Adım Rehber

Push notification, mobil uygulamaların kullanıcılarla etkileşim kurmasının en etkili yollarından biridir. React Native projelerinde Firebase Cloud Messaging (FCM) kullanarak bu özelliği hızlıca entegre edebilirsiniz. Bu rehber, iOS ve Android için gereken tüm adımları, kod örnekleriyle birlikte sunuyor.

Firebase Projesi Oluşturma ve Yapılandırma

İlk adım, Firebase Console üzerinden yeni bir proje oluşturmak veya mevcut bir projeyi kullanmaktır. Proje oluşturduktan sonra sırasıyla:

1. Proje ayarlarından Android ve iOS uygulamalarını ekleyin.
2. Android için google-services.json, iOS için GoogleService-Info.plist dosyalarını indirip projenize ekleyin.
3. Firebase Authentication ve Cloud Messaging API'lerini etkinleştirin.

Önemli: Push notification testleri için fiziksel bir cihaz kullanmanız önerilir. Emülatörlerde bildirim alma sorunları yaşanabilir.

React Native Projesine Gerekli Paketlerin Eklenmesi

React Native'de FCM entegrasyonu için en yaygın kullanılan kütüphane @react-native-firebase/messagingdir. Ayrıca temel Firebase modülünü de eklemeniz gerekir:

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

iOS için pod kurulumunu unutmayın:

cd ios/ && pod install

Android Konfigürasyonu

Android'de push notification için aşağıdaki ayarları yapın:

• android/app/build.gradle dosyasında defaultConfig içine minSdkVersion en az 21 olacak şekilde ayarlayın.
• Aynı dosyada apply plugin: 'com.google.gms.google-services' satırını ekleyin.
• android/app/src/main/AndroidManifest.xml içine aşağıdaki intent filter'ı ekleyin:

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

iOS Konfigürasyonu

iOS için aşağıdaki adımları izleyin:

1. Apple Developer hesabınızda bir App ID oluşturun ve Push Notifications yetkisini ekleyin.
2. Xcode projenizde Capabilities sekmesinden Push Notifications'ı açın.
3. AppDelegate.m dosyasına gerekli yöntemleri ekleyin (React Native Firebase dokümantasyonunda hazır kod mevcuttur).

iOS simülatörü push notification almaz; test için mutlaka gerçek bir cihaz kullanın.

JavaScript Tarafında Bildirim İşleme

Kurulum tamamlandıktan sonra JavaScript'te bildirim dinleyicilerini ekleyin:

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('İzin verildi');
  }
}

Token almak ve bildirimleri dinlemek için:

useEffect(() => {
  // Token al
  messaging().getToken().then(token => {
    console.log('FCM Token:', token);
  });

  // Ön planda bildirim al
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    console.log('Yeni bildirim:', remoteMessage);
  });

  return unsubscribe;
}, []);

Arka Planda Bildirim İşleme

Uygulama arka plandayken bildirim geldiğinde belirli bir ekrana yönlendirme yapmak için onNotificationOpenedApp ve getInitialNotification kullanılır. Ayrıca @react-native-firebase/messaging ile gelen data mesajlarını işleyebilirsiniz. Detaylı bir Node.js ile JWT Kimlik Doğrulama yazımızda olduğu gibi, backend tarafında da güvenli bir API tasarlamanız önemlidir.

Push Notification Gönderme

FCM token'ını backend'inize gönderdikten sonra bir sunucu üzerinden bildirim gönderebilirsiniz. Aşağıda Node.js ile örnek bir istek bulunuyor:

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

admin.initializeApp({
  credential: admin.credential.applicationDefault(),
});

const message = {
  token: 'ciz...',
  notification: {
    title: 'Merhaba',
    body: 'Bu bir test bildirimidir.',
  },
};

admin.messaging().send(message)
  .then((response) => console.log('Başarılı:', response))
  .catch((error) => console.log('Hata:', error));

Backend API tasarımı hakkında daha fazla bilgi için REST API Versiyonlama Stratejileri makalemize göz atabilirsiniz.

Sık Yapılan Hatalar ve Çözümleri

• Bildirim gelmiyor: Cihazın internet bağlantısını kontrol edin, token'ın geçerli olduğundan emin olun.
• iOS'da bildirim alınamıyor: APNs sertifikasını güncelleyin ve capabilities'de Push Notifications'ın açık olduğunu doğrulayın.
• Android'de bildirim ikonu görünmüyor: AndroidManifest.xml'e meta-data ile özel ikon atayın.
• Token değişiyor: Her uygulama açılışında token'ı güncelleyin ve backend'e iletin.

Unutmayın: Bildirim izni istemek için kullanıcıya net bir açıklama yapmalısınız. Aksi takdirde uygulamanız reddedilebilir.

Performans İpuçları

Push notification entegrasyonu sırasında aşırı token gönderimi yapmaktan kaçının. React Native'de FlatList Sanallaştırma yazımızda olduğu gibi, kaynak yönetimine dikkat etmek uygulama performansını artırır.

Sonuç

Firebase Cloud Messaging ile React Native uygulamanıza push notification eklemek, doğru adımlar izlendiğinde oldukça kolaydır. Bu rehberde hem iOS hem Android için kurulum ve kod örneklerini buldunuz. Unutmayın, kullanıcı deneyimini bozmamak için bildirimleri anlamlı ve seyrek gönderin.

Sık Sorulan Sorular

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

En yaygın kullanılan kütüphane @react-native-firebase/messaging'dir. Firebase'in resmi React Native desteği sayesinde hem iOS hem Android için güvenilir bir çözüm sunar.

Push notification almak için internet bağlantısı gerekli mi?

Evet, cihazın aktif bir internet bağlantısı olmalıdır. Bildirimler FCM sunucuları üzerinden gönderildiği için bağlantı olmadan alınamaz.

iOS'ta push notification testi nasıl yapılır?

iOS simülatörü push notification desteği sunmaz. Test için fiziksel bir cihaz kullanmanız ve Apple Developer hesabınızda geçerli bir APNs sertifikası oluşturmanız gerekir.

FCM token'ı neden değişir?

Token, uygulama yeniden yüklendiğinde, kullanıcı hesabı değiştirdiğinde veya belirli durumlarda (ör: Firebase SDK güncellemesi) değişebilir. Her uygulama açılışında token'ı alıp backend'e iletmek en güvenilir yöntemdir.

Push notification göndermek için backend şart mı?

Evet, FCM üzerinden bildirim göndermek için bir sunucu tarafı uygulaması (Node.js, Python vb.) gereklidir. Firebase Console'dan manuel gönderim test amaçlı kullanılabilir, ancak prodüksiyonda backend entegrasyonu şarttır.