Web Site Bildirimleri ve Firebase (FCM) Entegrasyonu
Merhabalar,
Bu yazımda sizlere Web push bildirimleri ve firebase entegrasyonundan bahsedeceğim.
Nedir — Neden Kullanılır ?
Bir web sayfasının asenkron olarak kullanıcı ile iletişime geçmesidir. Bir uygulama sunucusundan gönderilen mesaj web sayfasına ulaşır ve son kullanıcıya gösterilir.
Bildirim gönderildiği sırada kullanıcının tarayıcısı açık değil ise bildirim servisi gönderilen bildiriyi tutarak kullanıcı aktif olduğunda bildirimi kendisine gösterir.
Firebase Google tarafından geliştirilen bir BackEnd servisi diyebiliriz. Herhangi bir platformdan Firebase kullanarak kullanıcı ekleyebilir silebilir kullanıcının bilgileri anlık olarak değiştirebilirsiniz(Yani ios uygulamasında eklediğimiz kullanıcıyı hem webden hem android’den hızlıca takip edebiliriz). Bunun dışında bir mesajlaşma uygulaması yazabilir, uygulamanızın analizlerini ve raporlarını rahatlıkla takip edebilirsiniz.
Firebase Kayıt İşlemleri
https://console.firebase.google.com adresi üzerinden google hesabınız ile kayıt olabilirsiniz. Kayıt olduktan sonra açılan ekranda proje ekle diyerek yeni bir proje oluşturabilirsiniz.
Web Sayfası Entegrasyonu
Öncelikli olarak firebase ve firebase mesaj bağımlılıkları için aşağıdaki scriptleri projemize dahil etmemiz gerekmektedir.
Firebase bağımlılıklarını kaydettikten sonra config ayarlarımızı yapmamız gerekmektedir. Config ayarlarına ulaşmak için giriş yaptığımız console.firebase.com adresinde sırasıyla proje ayarları- web uygulaması oluşturma adımı seçilir.
2. adımdan sonra yeni bir uygulama oluşturduğumuzda karşımıza aşağıdaki gibi bir config ayarı gelicek. Bu config ayarını uygulamamızda script tagleri arasına yapıştırıyoruz.
Şimdi işin en zor kısmına geldik. Kullanıcılardan bildirimler için izin istememiz gerekiyor. Günümüzde çok az kişi web sayfaları tarafından istenilen bildirimlere izin veriyor. Kullanıcı bir kere bildirim izinlerine izin vermezse tekrardan o bildirimlere izin vermesi çok zor bir hâle geliyor maalesef.
messaging namespace, firebase instance’da tetiklendiği için, messaging.requestPermission() ile tarayıcının native bildirim isteğini tetikleyebiliriz. Yukarıda bulunan kodu script tagleri arasına ekleyip tarayıcımızı yeniledikten sonra aşağıdaki gibi bildirimleri göster izinleri karşımıza çıkar.
Service Worker Nedir — Ne İşe Yarar ?
Service Worker, tarayıcınızın web sitenizden bağımsız olarak arka planda çalıştırabildiği, çalışması için kullanıcı aksiyonuna ihtiyaç duymadan bir Javascript betiğidir. Arkaplanda çalışabiliyor olması sayesinde web uygulamalarınıza çeşitli özellikler katar.
Bildirimleri service worker tarafında sunmamız için firebase özelinde sitenizin /root pathinde firebase-messaging-sw.js isimli bir dosya oluşturmanız gerekiyor. Bu firebase instance’ımızın arayacağı kaynak dosyası. Firebase instance oluşturulurken, işbu dosya ismi firebase.js içinden register edildi. Firebase kullanmazsanız, register işlerini sizin halletmeniz gerekiyor.
Projemizin root klasörü içerisine firebase-messaging-sw.js adında bir dosya oluşturalım.
Dosyamızın içerisini aşağıdaki gibi oluşturalım. Dosyamızın içerisinde bulunan messagingSenderId alanını https://console.firebase.google.com adresinde Ayarlar- Cloud Messaging altından bulabilirsiniz.
Artık service worker tanımını da yaptıktan sonra bildirimlere izin verdiğimizde firebase tarafında kullacımız için oluşan token bilgisini alabiliriz.
Artık elimizde token bilgisi olduğuna göre kullanıcımıza bir bildirim gönderme vakti geldi. Bu Bildirimi göndermeden önce yollayacağımız mesaj için oluşturduğumuz messaging instance’ın onMessage metoduyla token’ı kaydettiğimiz user’a backend’den payload gönderebiliriz.
Postman yardımı ile bir bildirim metni oluşturarak bildirimi göstermeyi deneyelim.
{
"to": "eJW2mEIlrCE:APA91bHZsR2D0by7y9bhO9o1wBcj3quSf4HgpE7zhBKzSZf8T2yCmK4bitkAeBTPNallnmSC0osfaMNMrR7KWZt3LwsztTKZhi1ol5fJdjZKPercXIczh6mXcWJmjRkFMBmT5j4a7gyI",
"data": {
"notification": {
"title": "Test",
"body": "Test deneme içeriği",
"icon": "https://raw.githubusercontent.com/firebase/quickstart-js/master/messaging/firebase-logo.png"
}
}
}Yukarıdaki resimde dikkat etmemiz kısım:
- “to” olarak belirtilen kısım kullanıcı bildirimlere izin verdikten sonra bizim yakaladığım token.
- Authorization: içerisine key=”buraya console içerisinde bulunan sunucu anahtarı bilgisi gelecek” header kısmı içerisine authorization eklenmek zorundadır.
Postman içerisinden istekte bulunduğumda aşağıdaki gibi bir görüntü elde ettim.
Topic Oluşturma ve Topic bildirimleri
Eğer bildirimlerimizi tek bir kullanıcıya göndermek yerine bildirimlere izin veren kullanıcıları gruplayarak göndermek istersek kullanıcıları bir topic’e kaydetmemiz gerekir. Topic’e kayıt olduktan sonra gönderdiğimiz bildirimler kayıtlı tüm kullanıcılara gönderilecektir.
Bildirimlere izin veren kullanıcılardan elde ettiğimiz token bilgisini ve oluşturmak istediğimiz topic bilgisini “https://iid.googleapis.com/iid/v1/” adresi sonuna ekleyerek kullanıcıyı bir topic’e kaydedebiliriz.
“all” adında bir topic’e kullanıcımızı kaydettik. Şimdi “all” adındaki topic’e kayıtlı olan kullanıcılarımıza postman ile bir bildirim gönderelim. Daha öncedeki kullanımda olduğu gibi header kısmını değiştirmeden sadece to kısmını değiştiriyoruz.
Projenin kaynak kodlarına buradan ulaşabilirsiniz.
Faydalı olması dileğiyle.
