React Native uygulamanıza push notification eklemek, kullanıcı etkileşimini artırmanın en etkili yollarından biridir. Firebase Cloud Messaging (FCM), Google'ın ücretsiz ve ölçeklenebilir push bildirim servisi olarak bu süreci kolaylaştırır. Bu kılavuzda, React Native'de FCM entegrasyonunu sıfırdan, adım adım ve sık yapılan hatalarla birlikte ele alacağız.
Firebase Cloud Messaging Nedir ve Neden Kullanmalısınız?
FCM, Google'ın mobil uygulamalar ve web için sunduğu bir mesajlaşma platformudur. Android, iOS ve web tarayıcılarına güvenilir bir şekilde bildirim göndermenizi sağlar. Üstelik ücretsizdir ve ölçeklenebilir altyapısı sayesinde milyonlarca cihaza ulaşabilir. React Native'de FCM kullanmak, her iki platformda da aynı kod tabanı ile çalışmanıza olanak tanır.
Proje Kurulumu: Firebase Konsol ve React Native Projesi
- Firebase projesi oluşturun: Firebase Konsolu'na gidin, yeni bir proje ekleyin ve uygulamanıza (Android ve/veya iOS) ekleyin. Android için
google-services.json, iOS içinGoogleService-Info.plistdosyasını indirin. - React Native projenize Firebase SDK'sını ekleyin:
npm install @react-native-firebase/app @react-native-firebase/messagingkomutunu çalıştırın. iOS içincd ios && pod installyapmayı unutmayın. - Platform dosyalarını projeye ekleyin: İndirdiğiniz
google-services.jsondosyasınıandroid/appdizinine,GoogleService-Info.plistdosyasını iseios/dizinine kopyalayın. Android içinandroid/build.gradleveandroid/app/build.gradle'a gerekli bağımlılıkları ekleyin.
İzin Yönetimi: Kullanıcıdan Bildirim İzni Alma
Push notification göndermek için kullanıcıdan izin almanız gerekir. iOS'ta bu zorunludur, Android'de ise belirli sürümlerden itibaren isteyebilirsiniz. Aşağıdaki kod parçası ile izin istemini yönetebilirsiniz:
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.');
}
}Cihaz Token'ı Alma ve Saklama
Her cihaz için benzersiz bir FCM token'ı almanız gerekir. Bu token, mesaj göndermek için hedef olarak kullanılır. Token'ı uygulama ilk açıldığında alın ve sunucunuza veya bir veritabanına kaydedin.
import messaging from '@react-native-firebase/messaging';
async function getToken() {
const fcmToken = await messaging().getToken();
if (fcmToken) {
// Token'ı sunucuya gönder
console.log('FCM Token:', fcmToken);
}
}Token'lar zamanla değişebilir. Bu nedenle token yenileme olayını dinleyin:
useEffect(() => {
const unsubscribe = messaging().onTokenRefresh(token => {
console.log('Yeni token:', token);
// Yeni token'ı güncelle
});
return unsubscribe;
}, []);Bildirim Alma ve İşleme
Uygulama ön plandayken ve arka plandayken bildirim alma durumlarını farklı şekilde yönetmelisiniz. Ön plandayken bildirimleri görüntülemek için bir onMessage dinleyicisi ekleyin:
useEffect(() => {
const unsubscribe = messaging().onMessage(async remoteMessage => {
// Bildirim verilerini işle (örneğin bir modal göster)
console.log('Ön planda mesaj:', remoteMessage);
});
return unsubscribe;
}, []);Arka plandayken veya uygulama kapalıyken gelen bildirimler, işletim sistemi tarafından otomatik olarak görüntülenir. Uygulama arka plandan açıldığında bildirime tıklama olayını yakalamak için:
messaging().onNotificationOpenedApp(remoteMessage => {
console.log('Bildirim açıldı:', remoteMessage);
});
// Uygulama kapalıyken gelen bildirim
messaging().getInitialNotification().then(remoteMessage => {
if (remoteMessage) {
console.log('Kapalıyken bildirim:', remoteMessage);
}
});Bildirim Verileriyle Navigasyon
Bildirimler genellikle belirli bir ekrana yönlendirme amacı taşır. Bildirim verilerine (data payload) eklediğiniz bilgileri kullanarak kullanıcıyı doğru sayfaya yönlendirebilirsiniz. Örneğin:
- data: { screen: 'Profile', userId: '123' }
- Bildirime tıklandığında bu verileri okuyun ve Navigation ile ilgili ekrana gidin.
Sık Yapılan Hatalar ve Çözümleri
| Hata | Çözüm |
|---|---|
| Token alınamıyor | Firebase yapılandırma dosyasının doğru konumda olduğundan emin olun. iOS'ta GoogleService-Info.plist'in Xcode'a eklendiğini kontrol edin. |
| iOS'ta bildirim gelmiyor | Capabilities > Push Notifications ve Remote notifications'ı etkinleştirin. Ayrıca AppDelegate'de Firebase entegrasyonunu unutmayın. |
| Android'de bildirim gelmiyor | AndroidManifest.xml'de internet izni ve com.google.firebase.MESSAGING_EVENT servisini ekleyin. |
| Uygulama ön plandayken bildirim görünmüyor | Ön planda bildirimleri kendiniz göstermek için bir local notification veya in-app mesaj kullanın. |
Performans ve Güvenlik İpuçları
Push notification altyapısını optimize etmek için:
- Token'ları sunucuda güvenli bir şekilde saklayın ve HTTPS üzerinden iletin.
- Bildirim başına veri boyutunu 4KB ile sınırlayın.
- Çok fazla bildirim göndermekten kaçının; kullanıcı deneyimini olumsuz etkiler.
React Native uygulamanızın genel performansını artırmak istiyorsanız React Native'de Hermes Motoru Kullanarak Uygulama Performansını Artırma rehberimize göz atabilirsiniz. Ayrıca, API entegrasyonları konusunda Bubble ile API Entegrasyonu yazımız da ilginizi çekebilir.
Test ve Canlıya Alma
Geliştirme aşamasında Firebase Konsol üzerinden bildirim gönderebilirsiniz. Uygulamanızı yayınlamadan önce hem Android hem iOS'ta tüm senaryoları test edin: ön plan, arka plan ve uygulama kapalı. Ayrıca farklı cihaz ve Android/iOS sürümlerinde test yapın.
Push notification entegrasyonu doğru yapıldığında kullanıcı katılımını önemli ölçüde artırabilir. Adımları dikkatlice uygulayarak React Native uygulamanıza sağlam bir bildirim altyapısı kazandırabilirsiniz.
Sık Sorulan Sorular
React Native'de push notification için hangi kütüphane kullanılmalı?
En popüler ve güncel kütüphane @react-native-firebase/messaging'dir. Firebase entegrasyonu sayesinde hem Android hem iOS'ta tutarlı çalışır.
FCM token'ı neden değişir?
Token, cihaz yeniden başlatıldığında, uygulama yeniden yüklendiğinde veya belirli güvenlik durumlarında değişebilir. Token yenileme olayını dinleyerek güncellemelisiniz.
iOS'ta push notification için APNs sertifikası gerekli mi?
FCM, iOS'ta APNs üzerinden çalışır. Ancak Firebase, APNs anahtar yönetimini otomatikleştirir. Yine de Apple Developer hesabınızda push notification için gerekli sertifikayı veya anahtarı eklemeniz gerekir.
Uygulama ön plandayken bildirim nasıl görüntülenir?
onMessage dinleyicisi ile ön plandaki mesajları yakalayıp kendi bildirim UI'ınızı gösterebilir. Alternatif olarak @react-native-firebase/messaging ile yerel bildirim (local notification) oluşturabilirsiniz.
