React Native'de Firebase Cloud Messaging ile Push Bildirim Entegrasyonu: Adım Adım Rehber

Push bildirimleri, mobil uygulamaların kullanıcı etkileşimini artıran en güçlü araçlardan biridir. React Native uygulamanıza Firebase Cloud Messaging (FCM) entegre ederek hem iOS hem Android'de çalışan, güvenilir ve ölçeklenebilir bir bildirim altyapısı kurabilirsiniz. Bu rehber, FCM'i React Native projenize eklemekten test etmeye kadar tüm aşamaları adım adım ele alıyor.

1. Firebase Projesi Oluşturma ve Yapılandırma

İlk adım, Firebase Console üzerinden bir proje oluşturmak ve uygulamanızı kaydetmektir.

1. Firebase Console'a gidin ve yeni bir proje oluşturun.
2. Projenize bir Android uygulaması ekleyin: com.yourapp.package adını girin, google-services.json dosyasını indirip android/app/ altına koyun.
3. iOS uygulaması ekleyin: Bundle ID girin, GoogleService-Info.plist dosyasını indirip Xcode projesine ekleyin.
4. Firestore veya Realtime Database gibi bir veritabanı kullanmayacaksanız, sadece Cloud Messaging API'sini etkinleştirin.

2. React Native Projesine FCM Paketini Kurma

@react-native-firebase/messaging ve @react-native-firebase/app paketlerini projenize ekleyin.

1. Terminalde şu komutları çalıştırın:
   npm install @react-native-firebase/app @react-native-firebase/messaging
2. iOS için cd ios && pod install komutunu çalıştırarak CocoaPods bağımlılıklarını yükleyin.
3. Android için herhangi bir ek kurulum gerekmez, ancak google-services.json dosyasının doğru yerde olduğundan emin olun.

3. Bildirim İzinlerini Yönetme

Kullanıcıdan bildirim izni almak, özellikle iOS'ta zorunludur. Android'de 13 ve sonrası için izin gereklidir.

1. İzin istemek için requestPermission() metodunu kullanın. Örneğin:
   

   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.');
     }
   }

2. Uygulama ilk açıldığında bu fonksiyonu çağırın. İzin reddedilirse, ayarlara yönlendirme düşünebilirsiniz.

4. FCM Token'ını Alma ve Kaydetme

Her cihaz için benzersiz bir FCM token'ı almanız gerekir. Bu token, bildirimleri göndermek için kullanılır.

1. onTokenRefresh veya getToken() ile token'ı alın:

2. const token = await messaging().getToken();
   console.log('FCM Token:', token);
   // Token'ı kullanıcı hesabına veya bir backend API'sine kaydedin.

3. Token'ı güvenli bir şekilde saklayın ve değiştiğinde güncellemek için onTokenRefresh dinleyicisini kullanın.

Token yönetimi, güvenlik açısından önemlidir. Token'ı güvenli bir API bağlantısı üzerinden göndermelisiniz.

5. Bildirimleri Alma ve İşleme

Uygulama ön planda, arka planda veya kapalıyken bildirimleri işlemeniz gerekir.

• Ön planda: onMessage dinleyicisi ile bildirim verisini alın ve bir toast veya yerel bildirim gösterin.
• Arka planda/kapalıyken: onNotificationOpenedApp veya getInitialNotification ile kullanıcı bildirime tıkladığında yönlendirme yapın.

// Ön planda mesaj dinleyicisi
useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    console.log('Yeni bildirim:', remoteMessage.notification);
    // Örneğin, Alert.alert ile göster
  });
  return unsubscribe;
}, []);

6. Bildirimleri Gönderme (Test)

FCM konsolundan veya bir backend sunucusundan bildirim gönderebilirsiniz.

1. Firebase Console: Cloud Messaging sekmesine gidin, yeni bir kampanya oluşturun, test token'ınızı girin ve gönderin.
2. Backend API: FCM HTTP v1 API'sini kullanarak token'a bildirim gönderin. POST isteği örneği:

3. POST https://fcm.googleapis.com/v1/projects/{project-id}/messages:send
   Content-Type: application/json
   Authorization: Bearer {access_token}
   
   {
     "message": {
       "token": "device_token",
       "notification": {
         "title": "Merhaba",
         "body": "Bu bir test bildirimi"
       }
     }
   }

Backend'de token doğrulama ve hata yönetimi için JWT tabanlı oturum yönetimi kullanabilirsiniz.

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

• iOS'ta bildirim gelmiyor: Xcode'da Push Notifications yeteneğini etkinleştirin ve APNs anahtarını Firebase'e yükleyin.
• Android'de bildirim simgesi görünmüyor: android/app/src/main/res/ altına drawable klasörüne özel bir simge ekleyin.
• Token alınamıyor: google-services.json ve GoogleService-Info.plist dosyalarının projeye doğru eklendiğini kontrol edin.

8. Dikkat Edilmesi Gerekenler

• Veri mesajları vs bildirim mesajları: Bildirim mesajları sisteme otomatik olarak gösterilirken, veri mesajları sadece uygulama tarafından işlenir. Ön planda veri mesajı kullanmak daha esnektir.
• Yerel bildirimlerle entegrasyon: Ön planda bildirim göstermek için @react-native-firebase/messaging ile birlikte @notifee/react-native gibi bir kütüphane kullanabilirsiniz.
• Güvenlik: Token'ları asla istemci tarafında açıkta bırakmayın. Backend'inizde SSL Pinning ile güvenli iletişim sağlayın.

Bu adımları takip ederek React Native uygulamanıza tam işlevsel push bildirim ekleyebilirsiniz. Test aşamasında farklı senaryoları (ön plan, arka plan, kapalı) deneyerek hata ayıklamayı unutmayın.

Sık Sorulan Sorular

React Native'de push bildirim için hangi kütüphaneyi kullanmalıyım?

En yaygın ve güncel kütüphane @react-native-firebase/messaging'dir. Firebase Cloud Messaging ile entegre çalışır ve hem iOS hem Android'i destekler.

iOS'ta push bildirim çalışmıyor, ne yapmalıyım?

Xcode'da Push Notifications yeteneğini etkinleştirdiğinizden ve Firebase Console'a APNs anahtarını (p8) doğru yüklediğinizden emin olun. Ayrıca simülatörde değil, gerçek cihazda test edin.

FCM token'ını nasıl güvenli bir şekilde saklayabilirim?

Token'ı cihazda Secure Storage (örn. react-native-keychain) ile saklayabilir ve backend'e HTTPS üzerinden gönderebilirsiniz. Token'ı asla düz metin olarak loglamayın veya paylaşmayın.

Ön planda bildirim gelmiyor, neden?

iOS ve Android'de uygulama ön plandayken bildirimler otomatik olarak gösterilmez. onMessage dinleyicisini kullanarak bildirimi yakalayıp yerel bildirim (local notification) olarak göstermelisiniz.