Kullanıcılara Web Bildirimleri Göndermek
Bir bankacılık, e-ticaret veya blog sitesini göz önüne alalım. Yeni bir blog yazısı eklendiğinde, bankacılık uygulamasında kredi faizlerinde düşüş yaşandığında, müşteriye özel kredi limitleri tanımlandığında, kıyafet satılan bir e-ticaret platformunda kullanıcının incelediği ürün indirime girdiğinde vb durumlarda kullanıcının telefonu ya da bilgisayarındaki tarayıcıya bildirim gönderilerek etkileşime geçilmesi oldukça yaygın bir deneyimdir.
Bu yazıda Vuejs platformu üzerinde bir proje geliştirip yukarıdaki senaryolara benzer şekilde kullanıcılara nasıl anlık bildirim gönderebileceğimizi anlatacağım ;) Ancak ilerlemeden önce bilmemiz gereken önemli bir konu var. Mobil cihazlarda yüklü olan uygulamalar aktif olarak kullanımda değilken bile arka planda kullanıcıya bildirim atabilir. Bu bir web platformunda nasıl mümkün olabilir sorusu akıllara geliyor değil mi? İşte tam bu noktada sahneye Service Worker çıkıyor.
Service Worker
Tercih edilen tarayıcının, web sayfasından bağımsız olarak arka planda ayrı olarak çalışan javascript komut dosyasıdır. Sadece komut dosyası olarak basite indirmek yanlış olur. Bu noktada bilinmesi gereken birkaç önemli husus mevcuttur. Öncelikle service worker bir javascript işçisidir. Dolayısıyla DOM(Document Object Model) ile doğrudan bağlantı sağlaması mümkün değildir. Aynı zamanda güvenlik ihlallerinin önüne geçmek amacıyla yalnızca HTTPS üzerinden çalışır.
Peki Service Worker’ın ne gibi hünerleri mevcuttur, biraz da bunlardan bahsedelim. Örneğin önbelleğe(cache) alma , arka plan senkronizasyonunu sağlama, anlık bildirimde bulunma (push notification) vb oldukça kullanışlı işlevleri vardır.
Bilmemiz gereken konulardan birisi de bir Service Worker’ın yaşam döngüsüdür. Bu döngüyü aşağıda resmetmeye çalıştım.
Yaşam döngüsü başlıca üç aşamadan oluşur:
- Registration(Kayıt) : Yapılması gereken ilk adım Service Worker ’ı kayıt etmektir. Tabii ki kayıt etmeden önce tarayıcılarda desteklenip desteklenmediği kontrol edilmelidir. Service Worker’ın desteklediği tarayıcılar hakkında detaylı bilgi almak için şu adrese uğrayabilirsiniz.
- Installation(Kurulum) : Service Worker’ın başarılı şekilde kayıt edilmesi(register) kurulduğu anlamına gelmez. Kayıt işleminden sonra komut dosyası tarayıcıya indirilir ve Service Worker’e yüklemeye çalışır. İşte tam bu noktada event’i dinleyebilir , uygulamaya özgü görevler gerçekleşir.
- Activation(Aktivasyon) : Son adımımız artık yükleme işleminin başarılı şekilde olduğu durumdur. Yukarıdaki resimde servis worker ‘ın yaşam döngüsü incelendiğinde ilk adım karşılığı olan “installed”dır. Sonra Service Worker aktif duruma getirilir(activated). Artık sayfalar üzerinde kontrol yetkisine sahip olur ve belirli fonksiyonel olayları(fetch, sync ve push) işleyebilir. Eğer bu fonksiyonel olaylardan herhangi birini yakalamaz ise boşa düşer — yani ingilizce karşılığını sıkça gördüğümüz Idle konumuna gelir. Bir süre sonrada terminated şeklinde durum değiştirir.
Service Worker hakkında daha detaylı bilgi almak için şu adrese uğrayabilirsiniz.
Bende bu yazımda Service Worker’ın anlık bildirim işlevinden faydalanacağım.
Hem Service Worker’ı daha iyi anlamak hem de Firebase Cloud Messaging’i kullanmak için küçük bir proje üzerinden devam edelim.
Kullandığım Sistem / Uygulama
- Vuejs Geliştirme Ortamı : Visual Studio Code
- İşletim Sistemi : MacOS Mojave 10.14.6
- Anlık Bildirim Platformu(Push Notification): Firebase Engage(Google’ın Cloud Messaging ürünlerinden birisidir)
Projemizi Oluşturalım
Terminali açıyorum ve projenin kurulacağı dizine gelerek aşağıdaki kodu yazıyorum. Uygulamanın adını “vue-cloud-messaging” olarak belirledim.
Farkettiyseniz projeyi vue-cli terminal komutunu kullanarak oluşturuyorum. Eğer sizlerde yüklü değilse buraya tıklayarak gerekli kurulumları yapabilirsiniz.
vue create vue-cloud-messagingProjemiz için gerekli kurulumlar yapıldı. Şimdi Firebase platformuna geçelim.
Firebase Cloud Messaging
Web uygulamasında kullanacağım anlık bildirim için öncelikle firebase’de proje oluşturacağım. Firebase’de proje oluşturma işlemlerinde adım adım ilerleyeceğim.
- Firebase’n sitesini açıyorum, Add Project’e tıklayarak “vue-cm” adında projemi oluşturuyorum.
- Firebase Console açıldı. Burada html takısı olan ikona tıklıyorum.
- “vue-cloud-messaging” adında vuejs projeme firebase’i ekleyeceğim. Burada firebase için takma bir ad ekliyorum. Ardından Register App butonuna tıklıyorum.
- Ardından proje için gerekli Firebase configuration kısımları gelecek bu kısımları yazımın ilerleyen kısımlarında ekleyeceğim. Şimdi tekrardan vuejs projesini açıyorum. Proje için gerekli olan dependencylerin kurulumunu gerçekleştireceğim.
Vuejs Projesini Açıyorum…
Proje kurulumunu tamamladıktan sonra firebase paketini kullanabilmek için aşağıdaki terminal komutunu çalıştırıyorum.
npm install firebaseKurduktan sonra proje tasarım tarafında ufak değişiklikler yaptım. (Github hesabımdan kodlara ulaşabilirsiniz.)
Şimdi terminalden aşağıdaki komut ile birlikte projeyi build alarak local’de ayağa kaldırıyorum.
npm run serve
localhost:8080 portuna bakıyorum.
Harikaaaa :) Proje ayakta ve bir sorun görünmüyor.
Şimdi ise Firebase configuration ayarlarını yapacağım. Bu kısım Vuejs projesi ile firebase arasındaki haberleşmeyi sağlayacaktır.
Project Settings bölümündeki General kısmına geliyorum. Your Apps bölümünde web için register yaptığımda, takma ad verdiğim projeye tıklıyorum ve Firebase Cloud Messaging’i kullanabilmek için configuration kısmını kopyalıyorum.
Tekrardan projenin bulunduğu IDE’yi açıyorum, src dizinin altında “firebase-config.js” adında bir dosya oluşturuyorum ve az önce firebase configuration için kopyaladığım kodları yapıştırıyorum.
firebase-config.js dosyasını, Vuejs’de kök bileşeni olan ve uygulamamda kullanmak isteyeceğim eklentileri ve 3. taraf bileşenlerini ayarlamaktan da sorumlu olan main.js dosyasının içinde çağırıyorum. Bu durumda proje ilk ayağa kalktığında firebase-config.js dosyasını da render edecektir.
Sonra da Google Chrome’de devTools kısmında Console kısmına geliyoruz ve “Firebase config :” mesajının yayınlanmasını bekliyorum.
Süper haber :) Artık proje içerisinde firebase’i kullanabilecek hale getirdim. Şimdi sıra anlık bildirim yapabilmek (push notification) için gerekli olan kodları yazmaya geldi.
App.vue dosyasını açıyorum ve aşağıdaki kodları yazıyorum.
getMessaging() fonksiyonu ile cloud messaging için bir instance dönmesini bekliyorum. Peki bu instance bizim ne işimize yarayacak? Firebase sisteminden tokenın dönmesi için bizlerden istediği iki adet parametre mevcut bunlardan biriside bizlerden beklediği bu instance’dır. Tekrardan Chrome DevTools’da console’a geliyorum.
Firebase sisteminden dönecek olan token için istediğim instance’ı console’da gördüm.
Sırada Firebase sisteminden mevcut token değerinin alınması var. Öncelikle tarayıcımızdan bildirim izinleri açmamız gerekiyor. Ardından yukarıda bahsettiğim service worker devreye giriyor. Mevcut tokenı almadan önce public klasörünün altına firebase-messaging-sw.js adında javascript modülünü oluşturuyorum.
Firebase sisteminden dönecek olan tokenı almak için aşağıdaki kodları App.vue dosyası içerisinde methods objesi içinde getTokenAndShowMessage() adında fonksiyon tanımını yapıyorum ve created() adında ki hook metodunu çağırıyorum.
Yukarıdaki kodları incelediğimde getToken fonksiyonu ile firebase sisteminden dönmesini beklediğim currentToken, network çağrısı yaparak bir kez alınır. Sonrasında ikinci bir network çağrısı yapmadan currentToken, önbellekten(cache) dönecektir.
- vapidKey: Firebase Cloud Messaging için gerekli olan uygulamanın kimlik anahtarıdır.
vapidKey değerini almak için Firebase yönetim panelinde project settings -> cloud messaging kısmına geliyorum. Web configuration alanında get key pair butonuna basarak elde ediyorum. Sonra anahtarı kopyalayıp getToken() fonksiyonun bizden beklediği ikinci parametre olan options adında objenin içeresindeki vapidKey’e yazıyorum.
Projeyi tekrardan build aldım ve firebase sisteminden dönen Current tokenı aldığımı görmek için Chrome DevTools’da console’a bakıyorum.
Artık bir current tokena sahibim şimdi bu tokenı kopyalıyorum ve tarayıcıda iken bir bildirim atacağım. Bunun için firebase cloud messaging’e geliyorum. Send Text Message butonuna basıyorum ve current tokenımı buraya kopyalıyorum.
Tüm bu işlemlerin ardından + ikonu olan düğmeye basıp güncel token değerini ekleyip test düğmesine basıyorum. Bu çok doğal olarak bir bildirim atmamı (push notification) sağlayacaktır.
Web Uygulamasında gezinirken ön planda mesajları işleme
Ön tarafta mesajları işlemek için onMessage olayını(event) kullanarak gönderilen mesajın içeriğini ekranda alert ile beraber gösteriyorum.
Aşağıdaki kodları App.vue dosyasında getTokenAndShowMessage() metotunun içerisine ekleyerek sizlerde aynı sonucu elde edebilirsiniz.
Yukarıdaki kodları incelediğimizde, bir anlık bildirim (push notification) mesajı alındığında ve kullanıcı web sitenizinde aktif olarak bulunduğunda onMessage() eventi ile ön tarafta yapmak istediğiniz işlemleri gerçekleştirebilirsiniz.
Peki ya kullanıcı web sitesinde değil de başka bir siteyi ziyaret ediyor ya da bilgisayarda herhangi başka bir işlem gerçekleştiriyorken anlık bildirim atmak istenirse ne olacak ? Gelin şimdi bu sorunun cevabını bulalım.
Web Uygulamasında gezinirken arka planda mesajları işleme
Öncelik olarak proje içerisinde tarayıcımız için service workerı kayıt edilmesi gerekiyor. Bunun içinde firebase-config.js dosyasını açıyorum. Yukarıda firebase-config.js dosyasında firebase’i initialize etmiştim. Şimdi aşağıdaki kodları da ekliyorum.
Proje için tekrardan bir build alıyorum ve devTools console arabirimini açıyorum.
Service Worker’ın, localhost:8080/ portuna başarılı bir şekilde register olduğunu görüyorum.
Şimdi önceden public klasörü altına oluşturduğum firebase-messaging-sw.js dosyasını açıyorum ve aşağıdaki kodları ekliyorum.
Öncelikle public folderı altında bulunan firebase-messaging.sw.js isimli dosyayı firebase tarafı birebir aynı isimde arıyor. Bu dosya isminde herhangi bir değişiklik yapılamaz. onBackgroundMessage() eventi ile birlikte kullanıcı web sitesinde değil iken arka tarafta anlık bildirimlerin dinlenmesini ve ekstra olarak daha farklı işlemler yapılmasını sunuyor.
- showNotification() : ServiceWorkerAPI ’sinin , service worker kayıdını temsil eden ServiceWorkerRegistration interface’inden aktif bir service worker üzerinde bir bildirim oluşturan metotdur.
Tekrardan firebase cloud messaging console’una gelerek bir bildirim oluşturuyorum.
Harikaaaa :) Firebase sisteminden tetiklediğim anlık bildirim mesajı ben masaüstünde başka bir uygulama açıkken de geldi.
Neler Yaptık ?
Bu yazımızda Firebase Cloud Messaging servisi yardımıyla kullanıcılara nasıl anlık bildirim gönderebileceğimizi incelemeye çalıştık.
Kullanıcı, web sitesinde iken ön tarafa onMessage() eventi ile anlık bildirimi görüntüledik.
Aynı zamanda kullanıcı web sitesinde değil ve masaüstünde başka bir işlem ile uğraşırkende ServiceWorkerAPI sayesinde arka plandada onBackgroundMessage() olayı ile anlık bildirimi görüntüledik.
Son olarak Service Worker’ın önbelleğe(precache) alma , arka plan senkronizasyonunu sağlama, anlık bildirimde bulunma (push notification) vb oldukça kullanışlı işlevlerinden bahsettik.
Projenin kaynak kodlarına github hesabımdan ulaşabilirsiniz.
Sağlıcakla kalınız 👋.
