Web Push & Firebase Entegrasyonu
Selamlar,
Bir çok kanal üzerinde kullanılan push sisteminin web üzerinde ki entegrasyonu hakkında konuşuyor olucaz.
Ama önce;
Push Nedir ? sorusu ile başlayalım.
Push yani Push Notification( Anlık bildirimler) mobil cihazınızda ya da masaüstü bilgisayarınızda onay verdiğiniz uygulamaların ya da sitelerin anlık olarak bildirim mesajı göndermesidir diyebiliriz.
Başlamadan önce Push sistemlerin yapısından bahsetmek faydalı olacaktır.
Push notification servislerin temel mantığı sunucu üzerine gelen mesajları ilgili istemciye göndermek ve bu durumları yönetmek üzerine kuruludur.
Burada ki işlemleri kendinizde hazırlayarak bir server üzerinde herhangi bir action durumunda istediğiniz cihaza iletmek üzere hazırlayabilirsiniz. Sadece böyle bir sistemi tasarlamanız, kurmanız ve içeride ki bir çok senaryoyu gerçeklemeniz zaman alıcaktır.
Burda ki zamandan ve maliyetten kazanmak için hazır kütüphaneler kullanmak akıllıca olacaktır.
Hazır kütüphane seçenekleri
İnternette yaptığınız ilk aramada alttaki 3. parti seçeneklerden bir kaçını mutlaka bulursunuz.
Biz bu kütüphanelerden firebase’i kullanarak ilerliyor olucaz. Bu arada firebase ile bildirim gönderimi tamamen ücretsiz. Diğer ücretlendirmeleri incelemek isterseniz link üzerinen erişebilirsiniz.
Push kullanmak istiyorsak tüm uygulamamızı güvenli bağlantı (Https) üzerinden çalışır hale getirmemiz gerekiyor.
Peki Yaaa, Web Push Nedir ?
Aslında “Push Nedir başlığı”altında yaptığımız açıklamalardan farklı olarak sadece web üzerine gönderilen bildirimler olarak düşünebiliriz.
Mobil uygulamalarda olduğu gibi aynı şekilde tarayıcı açık olduğu sürece kullanıcıya iletilecektir. Eğer bildirim gönderilen kullanıcının tarayıcısı açık değil ise, bildirim servisi gönderdiğimiz bildirimi tutarak, kullanıcı aktif olduğunda gösterecektir.
Hangi tarayıcılar destekliyor?
Canıuse üzerinden incelediğimizde globalde sadece %77.02‘lik bir kullanım desteğine sahip.
Örnek Projemiz Üzerinden push gönderimi
Link üzerinde Firebase console gidip Projemizi oluşturalım.
Bağlantısı tıklandıktan sonra. 3 Adımda projemizi oluşturmuş olucaz. ilk adım olarak proje isimlendirmesini yapıyoruz.
2. adım olarak ise oluşturacağımız projede Google Analytics kullanıp kullanmayacağımızı belirliyoruz. Ben burada default ayarları ile ilerlemeyi tercih ettim.
3. ve son adım olarak ise; Google Analytics’i yapılandırması olarak ilerliyor. burayı da default ayarlar ile geçiyoruz.
ve son olarak ise projeyi oluştur diyerek ilerleyelim. Gerekli Yüklemeler tamamlandıktan sonra ise ilk başta verdiğimiz uygulama ismi ile projemiz açılıyor.
Böylece firebase tarafında proje oluşturma işlemini tamamlamış olduk.Proje isminden de anlaşıldığı gibi bir Web Push entegrasyonu şeklinde ilerliyor olucaz.
Proje oluşturma adımından sonra 2. adım olarak ise bir web uygulaması ekleyelim.
Gerekli tanımalamarı yaptıktan sonra; firebase sdk’sını projemize ekleyelim. Bunun için projemizde kullanılan html tarafında aşağıda ki tanımlamaları yerleştirelim.
<!-- The core Firebase JS SDK -->
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script><script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
Burada gerekli firebase configuration’larını tamamlamış olduk. Devam etmeden önce bir kaç konuya gözatalım;
Not: Firebase üzerinden gelen push notification’ları dinlemek için, Service-worker kullanılmalı bu sebepten Express.js gibi bir web framework kullanmalısınız.
Service Worker Nedir?
Tarayıcının arkaplanında çalışan sayfadan bağımsız scriptler olarak değerlendirilebilir. Service Worker DOM elemanlarına herhangi bir şekilde erişemez. Service Worker’ı kullanmak için uygulamanın bulunduğu server’da Https olmalıdır. Bize kattığı bir kaç özellikten bahsetmek gerekirse;
- Arkaplanda senkronizasyon yapar. Mesela internet yokken yollamaya çalıştığınız veriyi saklar, internet bağlantısı olduğu an yollar.
- Uygulamadan yollanan bütün HTTP isteklerini kontrol edebilirsiniz.
- Server’dan gelen Push Notification’ları dinler.
Örneğimiz üzerinden devam edelim;
var messaging = firebase.messaging();messaging.getToken().then(function (token) { console.log(token); }).catch(function (err) { console.log(err); });
Eğer firebase initializeApp işleminde bir sorun olmadı ise yukarıda ki kod yardımı ile yine firebase console tarafında Cloud Messaging altında kullanacağımız token’a erişmiş olduk.
Firebase tarafından oluşturulan bu token, test cihazı tanımlamak için kullanılacak.
Test Mesajı gönder butonu ile almış olduğumuz tokeni firebase tarafında tanımlıyoruz. Artık tanımladığımız bu token yardımı ile client tarafında ki test cihazımıza push gönderme işlemleri yapabiliyor olucaz.
Lafı çok uzatmadan devam edelim; En son token alma işlemimizi tamamlamıştık.
index.html içinde ki kodların tamamına bir gözatalım;
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script><script>var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};firebase.initializeApp(firebaseConfig);var messaging = firebase.messaging();
messaging
.getToken()
.then(function (token) { console.log(token); })
.catch(function (err) { console.log(err); });</script>
Şimdi ise firebase tarafında beklenen firebase-messaging-sw.js service worker dosyamızı inceleyerek devam edelim;
Yukarıda initInSw methodu ile servis worker aktif olduğunda firebase push kısmınında aktif olması için tekrar firebase.initialize ettik.
onBackgroundMessage fonksiyonu ile push gelmesi durumunda bir image ve body message ile ekranda popup olarak gösterdik.
Son olarak ise express tarafında hazırlamış olduğumuz dosyayı inceleyelim;
- Gerekli Cors ayralarımızı yaptık.
- Render edilecek html sayfamızı ve url’imizi ayarladık.
- Son olarak ise listen methodu ile portumuzu dinlemeyebaşladık.
Cors Nedir?
“Farklı Merkezler Arası Kaynak Paylaşımı (Yaygın olarak bilinen adıyla -Cross-Origin Resource Sharing (CORS) ) ek HTTP başlıkları (header) kullanarak tarayıcıyla iletişime geçer ve farklı merkezler arasında gerçekleşen kaynak paylaşımı sırasında kaynak talep eden tarafın, kaynak sağlayan tarafça istenen izinlere sahip olup olmadığını tarayıcıya bildirir.
Peki CORS ne zaman gerçekleşir? Hangi durumlarda merkezin farklı olduğu kabul edilir ?
Bunu kısaca şöyle açıklayabiliriz, veri isteğinde bulunan taraf ile veri sağlayan taraflar arasında alan adı, protokol veya port farkı varsa tarafların farklı merkezlerde yer aldığı kabul edilmektedir.”
Not: Burada dikkat etmeniz gereken nokta ise Service Worker’ın çalışması için Cors ayarlarını mutlaka eklemeniz gerekiyor.
Konuyla ilgili önerileriniz ve sorularınız varsa yorumlarınızı bekliyorum. Okuduğunuz için teşekkür ederim..
