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:
- Proje ayarlarından Android ve iOS uygulamalarını ekleyin.
- Android için
google-services.json, iOS içinGoogleService-Info.plistdosyalarını indirip projenize ekleyin. - 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.gradledosyasındadefaultConfigiçineminSdkVersionen az 21 olacak şekilde ayarlayın.- Aynı dosyada
apply plugin: 'com.google.gms.google-services'satırını ekleyin. android/app/src/main/AndroidManifest.xmliç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:
- Apple Developer hesabınızda bir App ID oluşturun ve Push Notifications yetkisini ekleyin.
- Xcode projenizde Capabilities sekmesinden Push Notifications'ı açın.
AppDelegate.mdosyası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'emeta-dataile ö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.






