Web Push nedir ve neden hâlâ önemli?
Web Push bildirimleri, kullanıcı tarayıcıyı kapatsa bile (izin verdiği sürece) tarayıcı üzerinden bildirim göndermenizi sağlar. Özellikle PWA (Progressive Web App) kullanan projelerde kullanıcıyı geri çağırmak, kampanya duyurmak veya kritik olayları bildirmek için hâlâ en etkili yöntemlerden biridir. Bu yazıda güncel ve pratik bir yaklaşım olarak Firebase Cloud Messaging (FCM) ile web push bildirimlerini nasıl kuracağınızı anlatacağım.
Ön koşullar ve dikkat edilmesi gerekenler
Kuruluma başlamadan önce şu maddeleri kontrol edin: (1) Siteniz HTTPS üzerinden yayınlanmalı. (2) Kullanıcı izni olmadan bildirim gönderemezsiniz; izin isteme akışını doğru tasarlayın. (3) Push, tarayıcı ve platforma göre değişir: Android’de Chrome oldukça sorunsuzken, iOS tarafında Web Push desteği sürüm ve kurulum tipine göre farklı davranabilir. (4) Bu öğretici, istemci tarafta JavaScript ve Service Worker, sunucu tarafta ise token yönetimi mantığını esas alır.
1) Firebase projesi oluşturma ve Web uygulaması ekleme
Firebase Console’a girip yeni bir proje oluşturun. Proje hazır olunca “Project settings” üzerinden “Your apps” bölümünde bir Web App ekleyin. Firebase size bir yapılandırma nesnesi (apiKey, authDomain, projectId vb.) verecek. Bu bilgileri istemci tarafta kullanacağız. Ardından “Cloud Messaging” sekmesinden bir VAPID key (Web Push certificates) üretin. Bu anahtar, tarayıcıların push aboneliğini doğrulamak için kullanılır ve istemci tarafında gerekecek.
2) Projeye Firebase SDK ekleme (modüler yaklaşım)
Blogger’da veya klasik bir web projesinde modüler Firebase SDK kullanımında iki seçenek var: (a) Paket yöneticisi (npm) ile derlenmiş proje, (b) CDN üzerinden modül import. Basit senaryoda CDN işinizi görür. Örneğin bir “app.js” dosyasında Firebase App ve Messaging modüllerini içeri alıp yapılandırmayı başlatırsınız. Önemli nokta: Bildirim için messaging modülünü doğru import etmek ve tarayıcı desteğini kontrol etmektir.
3) Service Worker dosyasını hazırlama (firebase-messaging-sw.js)
Web Push’un kalbi Service Worker’dır. Kök dizinde firebase-messaging-sw.js gibi bir dosya oluşturun. Bu dosya arka planda gelen mesajları yakalar. Arka plan bildirimi göstermek için “onBackgroundMessage” benzeri bir dinleyici kullanılır. Burada bildirimin başlığı, gövdesi ve tıklama davranışı gibi alanları tanımlayabilirsiniz. Service Worker dosyanızın mutlaka sitenin köküne veya kapsamı doğru ayarlanmış bir dizine konumlandığından emin olun; aksi halde tarayıcı bildirimleri doğru scope’ta yakalayamaz.
4) Tarayıcıdan izin isteme ve FCM token alma
İstemci tarafta kullanıcıdan bildirim izni istemeniz gerekir. Burada yapılan en büyük hata, sayfa açılır açılmaz izin istemektir. Bunun yerine kullanıcıya bir değer önerin: “Sipariş güncellemeleri için bildirimleri aç” gibi. Kullanıcı izin verince FCM üzerinden bir registration token alırsınız. Bu token’ı sunucunuza gönderip kullanıcı hesabı, cihaz veya abonelik tercihleriyle ilişkilendirmeniz gerekir. Token yönetimini doğru yapmazsanız, aynı kullanıcıda birden fazla token birikir ve gereksiz bildirim gönderimleri oluşur.
5) Sunucu tarafında bildirim gönderme mantığı
FCM ile push göndermenin iki yolu öne çıkar: (1) Firebase Console’dan test amaçlı gönderim, (2) Sunucudan FCM HTTP v1 API ile programatik gönderim. Üretim senaryosunda ikinci yöntem şarttır. Bunun için bir servis hesabı (service account) ile OAuth 2.0 üzerinden erişim token’ı alıp FCM endpoint’ine istek atarsınız. Mesaj gövdesinde hedef olarak token (tek cihaz), topic (kanal) veya condition (mantıksal filtre) kullanabilirsiniz. Ayrıca web tarafında bildirim göstermek için payload içinde notification ve/veya data alanlarını doğru kurgulamak önemlidir.
6) İleri seviye ipuçları: Topic, segmentasyon ve ölçüm
Web push’u “herkese aynı bildirim” seviyesinde bırakırsanız kullanıcılar hızlıca izinleri kapatır. Daha iyi bir yaklaşım, kullanıcının tercihine göre topic aboneliği yaptırmaktır: örneğin “indirimler”, “blog”, “stok” gibi kanallar. Böylece sadece ilgili kitleye bildirim gider. Bir diğer ileri seviye konu da ölçümdür: Bildirimin tıklanma oranı (CTR) ve dönüşümünü takip etmek için linklere UTM parametreleri ekleyin ve Analytics tarafında kampanyaları ayrı raporlayın. Ayrıca Service Worker’da “notificationclick” event’ini yakalayıp kullanıcıyı doğru sayfaya yönlendirmek, deneyimi ciddi şekilde iyileştirir.
7) Sık karşılaşılan sorunlar ve hızlı çözümler
Token alınamıyor: VAPID anahtarını doğru kullandığınızdan ve Notification izninin “granted” olduğundan emin olun. Service Worker çalışmıyor: Dosya yolu/scope hatalarını kontrol edin; tarayıcı “Application” sekmesinden kayıt durumuna bakın. Bildirim geliyor ama tıklayınca açılmıyor: Service Worker’daki “notificationclick” içinde doğru URL ve focus mantığı kurun. Çoklu cihaz kirliliği: Token’ları kullanıcı bazında güncelleyin; geçersiz token’ları (NotRegistered) yanıtlarına göre temizleyin.
Sonuç
Firebase Cloud Messaging ile web push bildirimleri, doğru kurgulandığında PWA veya klasik web sitenizde kullanıcı etkileşimini ciddi ölçüde artırabilir. Bu rehberde proje oluşturma, VAPID anahtarı, Service Worker mantığı, token yönetimi ve üretim senaryosunda gönderim yaklaşımını ele aldık. Bir sonraki adım olarak topic tabanlı abonelik ve ölçümleme ekleyerek bildirimi “spam” olmaktan çıkarıp gerçek bir ürüne dönüştürebilirsiniz.
