React İle Fcm Kullanarak Tarayıcı Üzerinden Anlık Bildirim Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce sisteminizde Node.js ve React yüklü olmalıdır. Ayrıca bir Firebase projesine ihtiyacınız var. Firebase konsolu üzerinden yeni bir proje oluşturup, "Web" uygulamasını ekleyerek gerekli yapılandırma anahtarlarını almanız gerekmektedir.

• Node.js (LTS sürümü önerilir)
• React projesi (Vite veya Create React App)
• Firebase hesabı ve proje yapılandırma dosyası
• HTTPS destekli bir geliştirme ortamı (Firebase bildirimleri için tarayıcılar HTTPS zorunluluğu arar)

Firebase Projesinin Kurulumu ve Yapılandırma

İlk adım olarak projenize Firebase kütüphanesini dahil etmelisiniz. Terminal üzerinden aşağıdaki komutu çalıştırarak gerekli paketleri yükleyin:

npm install firebase

Yükleme tamamlandıktan sonra, projenizin kök dizininde firebase.js adında bir dosya oluşturun. Bu dosya, Firebase ile olan bağlantı noktanız olacaktır.

import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const messaging = getMessaging(app);

Yukarıdaki kod bloğunda, Firebase projenize ait benzersiz kimlik bilgilerini yerleştirerek messaging servisini başlatıyoruz. Bu servis, tarayıcı üzerinden bildirim almamızı sağlayacak temel yapıdır.

Service Worker Dosyasının Oluşturulması

Tarayıcı kapalıyken veya uygulama arka plandayken bildirim alabilmek için bir firebase-messaging-sw.js dosyasına ihtiyacınız vardır. Bu dosya, uygulamanızın public klasörü içerisinde bulunmalıdır.

importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

Bu dosya, tarayıcının arka planında çalışarak gelen bildirimleri yakalar ve işletim sistemine iletir. importScripts kullanımı, bildirimlerin uygulama açık olmasa bile işlenmesini sağlar.

React İçerisinde Bildirim İzni Alma

Kullanıcılardan bildirim izni istemek, tarayıcı güvenliği açısından kritik bir adımdır. requestPermission fonksiyonu ile bu izni yönetebiliriz.

import { getToken } from 'firebase/messaging';
import { messaging } from './firebase';

export const requestForToken = async () => {
  try {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      const token = await getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' });
      console.log('Token alındı:', token);
      return token;
    }
  } catch (err) {
    console.error('İzin alınamadı:', err);
  }
};

Bu fonksiyon, kullanıcıya bildirim izni penceresini açar. İzin verildiği takdirde, sunucumuzun o kullanıcıya özel bildirim göndermesini sağlayacak olan benzersiz token değerini döndürür.

Ön Plan Bildirimlerini Yönetme

Uygulamanız açıkken bildirimlerin nasıl görüneceğini onMessage fonksiyonu ile kontrol edebilirsiniz. Aşağıdaki örnek, React bileşeniniz içerisinde bildirimleri nasıl dinleyeceğinizi gösterir.

import { useEffect } from 'react';
import { onMessage } from 'firebase/messaging';
import { messaging } from './firebase';

function NotificationListener() {
  useEffect(() => {
    onMessage(messaging, (payload) => {
      console.log('Yeni bildirim geldi:', payload);
      alert(payload.notification.title);
    });
  }, []);

  return null;
}

Bu kod bloğu, uygulama aktifken gelen bildirimleri yakalar ve bir uyarı (alert) olarak ekrana yansıtır. Gerçek projelerde bunu bir "Toast" bildirimi veya özel bir modal ile göstermeniz daha profesyonel bir kullanıcı deneyimi sağlar.

Bildirim Yöntemlerinin Karşılaştırılması

Anlık bildirim sistemleri kurarken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, FCM ve diğer yöntemlerin kısa bir karşılaştırmasını sunar.

Güvenlik Uyarısı: VAPID anahtarınızı ve Firebase yapılandırma bilgilerinizi asla public (herkese açık) repolara yüklemeyin. Çevresel değişkenler (environment variables) kullanarak bu verileri gizli tutun. Bildirim servisleri üzerinden kullanıcı gizliliğini ihlal edecek veriler göndermekten kaçının.

Sıkça Sorulan Sorular

Bildirimler neden gelmiyor?

Öncelikle HTTPS protokolü üzerinde çalışıp çalışmadığınızı kontrol edin. Ayrıca tarayıcı ayarlarından siteye bildirim izni verip vermediğinizi doğrulayın.

Arka planda bildirim çalışır mı?

Evet, firebase-messaging-sw.js dosyanız doğru yapılandırıldıysa tarayıcı kapalı olsa bile işletim sistemi üzerinden bildirim alabilirsiniz.

Token süresi ne kadardır?

FCM tokenları zamanla değişebilir veya geçersizleşebilir. Uygulamanızın her açılışında tokenı kontrol edip sunucunuzda güncellemeniz en iyi pratiktir.

Tarayıcı desteği nasıldır?

Güncel tüm modern tarayıcılar (Chrome, Firefox, Edge, Safari) FCM bildirimlerini desteklemektedir.

Bildirimleri özelleştirebilir miyim?

Evet, Firebase konsolu veya admin SDK üzerinden başlık, içerik ve tıklama aksiyonlarını özelleştirebilirsiniz.

Bildirim Sistemlerinde Performans ve Ölçeklendirme İpuçları

FCM entegrasyonu büyüdükçe, milyonlarca kullanıcıya anlık bildirim göndermek ciddi bir ağ ve işlem yükü oluşturabilir. Uygulamanızın performansını korumak için aşağıdaki stratejileri göz önünde bulundurmalısınız:

• Token Yönetimi: Kullanıcı tarayıcıyı kapattığında veya verileri temizlediğinde FCM token'ları geçersiz hale gelebilir. Sunucunuzda "geçersiz" (invalid) olarak işaretlenen token'ları düzenli olarak temizleyen bir temizlik (cleanup) script'i çalıştırmalısınız.
• Toplu Gönderim (Batching): Tek tek bildirim göndermek yerine, Firebase Admin SDK'nın sağladığı sendMulticast metodunu kullanarak tek bir API çağrısı ile 500'e kadar cihaza bildirim iletebilirsiniz.
• Payload Optimizasyonu: Bildirim yükünü (payload) mümkün olduğunca küçük tutun. Büyük veri setlerini bildirim içerisinde taşımak yerine, bildirimi sadece bir tetikleyici olarak kullanıp, veriyi arka planda API üzerinden çekin.

Üretim Ortamında Hata Ayıklama (Debugging)

Geliştirme aşamasında bildirimlerin ulaşmaması genellikle konfigürasyon hatalarından kaynaklanır. Uygulamanızı canlıya almadan önce şu kontrol listesini uygulayarak sorunları hızlıca tespit edebilirsiniz:

1. Service Worker Kayıt Durumu

Tarayıcı konsolunda chrome://serviceworker-internals/ adresine giderek servis worker'ınızın "Running" durumunda olup olmadığını kontrol edin. Eğer "Redundant" durumundaysa, dosya yolu veya kapsam (scope) hatalı olabilir.

2. Firebase Mesajlaşma Logları

Firebase'in kendi loglarını tarayıcı konsolunda aktif ederek gelen mesajları izleyebilirsiniz:

// Firebase loglarını aktif etmek için
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log("Gelen mesaj verisi: ", payload);
  // Bildirim içeriğini burada işleyin
});

3. Token Geçerlilik Testi

Token'ın hala geçerli olup olmadığını anlamak için Firebase Console üzerindeki "Cloud Messaging" sekmesinden ilgili token'a özel test bildirimi gönderin. Eğer Firebase "Token not found" hatası veriyorsa, istemci tarafındaki token yenileme (onTokenRefresh) mantığınızı gözden geçirmeniz gerekir.

Profesyonel İpucu: Bildirimlerin kullanıcı deneyimini bozmaması için "Bildirim İzni" isteme sürecini, kullanıcı uygulamada önemli bir aksiyon gerçekleştirdikten sonra (örneğin bir sipariş tamamlandıktan sonra) tetikleyin. Doğrudan sayfa açılışında izin istemek, kullanıcıların %70'inden fazlasının "Engelle" butonuna basmasına neden olur.

Alternatif: Bildirimleri Veritabanı ile Senkronize Etme

Bildirimleri sadece anlık olarak göstermek yerine, kullanıcıya bir "Bildirim Merkezi" sunmak istiyorsanız, FCM token'larını bir veritabanında (PostgreSQL, MongoDB vb.) saklamanız şarttır. Aşağıdaki örnek, token'ın sunucuya nasıl gönderileceğini göstermektedir:

const saveTokenToDatabase = async (token) => {
  try {
    const response = await fetch('/api/v1/update-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token, userId: currentUser.id })
    });
    return response.ok;
  } catch (error) {
    console.error("Token veritabanına kaydedilemedi:", error);
  }
};

Bu yöntem sayesinde, kullanıcı çevrimdışı olsa bile, tekrar bağlandığında sunucunuzdaki "okunmamış bildirimler" tablosunu sorgulayarak eksik bildirimleri kullanıcıya gösterebilirsiniz.

Sonuç

React ile FCM kullanarak bildirim sistemi kurmak, başlangıçta karmaşık görünse de adım adım ilerlendiğinde oldukça yönetilebilir bir süreçtir. Bu rehberde, Firebase kurulumundan servis worker yönetimine ve kullanıcıdan izin almaya kadar temel süreçleri tamamladık. Bir sonraki adım olarak, aldığınız token değerlerini kendi veritabanınıza kaydederek, sunucu tarafında (Node.js veya Python gibi) bildirim tetikleme mekanizmaları kurabilirsiniz.

Yazılım geliştirme süreçlerinde güvenlik en önemli önceliğiniz olmalıdır. Kodunuzu üretim ortamına almadan önce tüm API anahtarlarını güvenli bir şekilde sakladığınızdan ve kullanıcı izinlerini şeffaf bir şekilde yönettiğinizden emin olun.