Bugünlerde neredeyse tüm sitelerde notification’lar çıkarak siteye abone olmak isteyip istemediklerini içeren bir onay penceresi çıktığını görüyoruz işte bu notification’ların çoğunluğu javascript notification api’si tarafından çıkarılmaktadır bizde bu makalede detaylıca ve örnekli olarak ne olduğunu ve nasıl kullanabileceğimizi göreceğiz.
Javascript notification api kullanımı
Bu notification api’leri ile aslında akıllı mobil cihazlar hayatımıza girdiğinden beri tanışmış durumdayız hatta akıllı cihazları bir kenara bırakın siyah beyaz ekranlarda bile mesaj geldiğinde çıkan bildirimler bile şuan görsel olarak çıkan bildirimlerin atası denebilir. Akıllı cihazlarda ise bu notification’ların saldırısına maruz kalabiliyoruz yüklediğiniz uygulama sayısına ve ilgili uygulamaların gün içerisinde yayınladığı bildirime göre değişebiliyor fakat bu makaledeki asıl konumuz web notification belki farklı bir makalede xamarin forms ile android ve ios üzerinde push notification ve local notification konusuna değinebiliriz.
Şimdiye kadar metinsel olarak bahsettiklerimden belki bilmeyenler için birşeyler canlandıramamış olabilirim. Makalenin sonuna kadar sadece metinsel anlatımlarla boğmadan elde edeceğimiz sonuçla ilgili bir ekran görüntüsü paylaşmak istiyorum ve sizlerle tam olarak ekran görüntüsündeki çıktıyı elde edebilmek için notification api’yi kullanacağız.
Notification API onay penceresi.
Şimdi işleyişe değinelim biraz notification api isteği kullanıcıya gönderilerek kullanıcıdan onay istenir eğer kullanıcı izin verirse tarayıcı kapalı olsada sizin oluşturacağınız notification’lar izin vermiş olan kullanıcılara iletilecektir zaten asıl amaçda bu zaten diğer türlü alert veya farklı uyarı bildirimi yapacağımız kütüphaneler ile zaten bu ihtiyacı karşılabiliyoruz(Tabi sadece izin vermiş olan kullanıcılara bildirim göndermek isterseniz ve sadece sitenin açık olması durumunda alert v.b local bildirim çözümlerini kullanabilmek için socket v.b yöntemler kullanmamız gerekecektir örnek signalr teknolojisi).
Bu API’nın nerede kullanılabileceğini tam olarak kestiremediyseniz şimdiye kadar karşılaştığım notification api kullanımlarından örnekler vericem bazı mp3 sitelerinde yeni bir albüm yayınlandığında masaüstünüzde çıkarılan direkt notification api ile ilgili album’e erişebilirsiniz. Yada sosyal medyalarda arkadaşlarınız yeni bir fotoğraf eklediğinde yada yorumda sizden bahsettiğinde direkt olarak masaüstünüze yada mobil cihazınıza notification api ile bildirim gönderilir ve sizde ilgili notification’a tıklayarak kaynağa gidebilirsiniz.
Yavaş yavaş notification api kullanımına ve kod örneklerimize geçelim. Notification API’nin tarayıcınız tarafından desteklenip desteklenmediğini öğrenmek için alttaki gibi bir kod kullanabilirsiniz.
1 2 3 4 5 | if ('Notification' in window) { console.info("API destekleniyor") } else { console.info("API desteklenmiyor") } |
Şuan kullanmakta olduğunuz tarayıcınızın Notification API’yi destekleyip desteklemediğini öğrenmek için alttaki kodu çalıştırmanız yeterlidir.
Notification API mobil ve masaüstü platformunun hepsinde desteklenmediği için kullanımı konusunda çekingen davranılıyor çünkü halen belli bir kullanıcı kitlesi olan ve en son özellikleri destekleme konusunda özürlü olan IE tarafından desteklenmemektedir. Fakat microsoft’un tarayıcı türünde ikinci çocuğu olan Edge tarayıcısının 14’üncü sürümünden beri desteklenmektedir. Tarayıcı desteği konusunda daha detaylı bilgi için Tarayıcı Desteği kısmına gözatınız.
Tarayıcınızın Notification API desteği varsa diğer örneklere devam edebiliriz. Bir üstteki kod örneğimizde If bloğundaki koşulda window nesnesi içerisinde Notification adlı bir özellik yer alıyormu diye kontrol etmiştik eğer bu koşul sağlanırsa yani tarayıcının böyle bir özelliğe desteği varsa bu durumdada ikinci bir koşul olarak daha önce kullanıcıya notification api ile bir onay bildiriminde bulunulmuşmu ve onay bildirimi sonucu denied yani reddedilmemişmi diye kontrol edeceğiz eğer reddedilmiş ise bir daha onay istememizin bir anlamı olmayacaktır siz onay isteseniz dahi kullanıcı daha önce Engelle(Tarayıcıya yada dile göre bu metin değişebilir) butonuna tıkladığı için tarayıcı bu kodunuzu işlemeden daha önce kullanıcı tarafından verilmiş olan cevabı dönecektir denied yada granted olarak.
Eğer notification için izin vermiş olduğunuz bir sitenin sonradan bu iznini kaldırmak isterseniz chrome’da Ayarlar > İçerik Ayarları > Bildirimler > İstisnaları yönet adlı butona tıkladıktan sonra izin verilmiş ve verilmemiş olan tüm siteler listelenecektir istediğiniz domain’e izin verebilir yada izin verilmiş bir sitenin iznini kaldırabilirsiniz. Eğer Firefox kullanıyorsanız o zaman sırasıyla şu adımları uygulayıp erişebilirsiniz bildirim izinlerine Seçenekler > İçerik > Bildirim > Seç chrome ve firefox için belirttiğim adımlar tarayıcı dilinize göre değişecektir.
Şimdi kullanıcıdan Notification onayı isteyelim onay penceresi çıkarabilmek için kullanacağımız kod şu şekilde olacak.
1 2 3 4 5 6 7 8 | //Notification onayı almak için requestPermission fonksiyonunu çalıştırıyoruz dönen bir promise //nesnesi olduğu için then fonksiyonundan sonucunda dönmesini atacdığımız anonymous //function içerisinden bekliyoruz. Promise sonucunu kullanmak istemiyorsanız o zaman //requestPermission fonksiyonuna anonymous function tanımlayabiliriz requestPermission(function (result) {}) gibi. Notification.requestPermission().then(function(result) { //sonucu result parametresinden alabilirsiniz. string türünde granted yada denied dönecektir. console.log(result); }); |
Hemen sonraki adıma geçelim eğer kullanıcı denied sonucu dönecek bir eylemde bulunduysa yani Engelle dediyse işlem bitmiştir ama kullacıların granted yani Onay vermiş olabileceğini varsayarak yeni bir bildirim nasıl oluşturup kullanıcıya göndereceğimizle ilgili kod bloklarımıza gözatalım.
1 2 3 4 5 | var notification = new Notification('Başlık', { body: 'Mesaj gövdenizi buraya yazın', icon: '/simle_yolunuz/icon.png', // opsiyonel image: '/image_yolu/image.jpg' // opsiyonel }); |
Onay pencersini programatik olarak kapatmak istersek notification.close() gibi bir kod fonksiyonu kullanarak kapatabilirsiniz.
Event’ler
| Event | Açıklama |
| Notification.onclose | Notification kullanıcı tarafından kapatıldığında tetiklenecek event. |
| Notification.onshow | Notification gösterildiğinde tetiklenecek event. |
| Notification.onclick | Notification’a tıklandığında tetiklenecek event. |
Bir üstteki örnek koda event’lerimizi ekleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var notification = new Notification('Başlık', { body: 'Mesaj gövdenizi buraya yazın', icon: '/simle_yolunuz/icon.png' // opsiyonel }); notification.onclose = function(){ console.info("kapatıldı") } notification.onshow = function(){ console.info("gösterildi") } notification.onclick = function(){ console.info("tıklandı") } |
Chrome tarayıcısının 59.versiyonu ile macos’da çıkan notification bildirimleri native olarak çıkmaktadır.
Tarayıcı Desteği
Eğer kendiniz daha eski sürüm tarayıcıları desteklemek için pollyfill çözümleri ile falan uğraşmak istemiyorsanız o zaman push.js veya Notify.js kütüphanesi bu noktada size çözüm olabilir hem yazacağınız kodlar daha sadeleştirilmiş ve anlaşılması kolay halde olduğundan kolaylıkla projelerinizde kullanabilirsiniz.
Hangi tarayıcıların hangi versiyondan itibaren destekleyip desteklemedikleri hakkında detaylı grafik. Kaynak: https://caniuse.com/#feat=notifications
Mekale çin teşekkürler.
fakat bu anlattığınız konu her yerde anlatıldığı gibi basit bir tanıtım olmuş. Benim istediğim browser kapalıyken belirli zaman aralıklarla ajax kullanarak serverde örneğin client1 client2 ye mesaj gönderdiğinde mesaj tablosuna bir kayıt eklenir. client2 bu mesajdan nasıl haberdar olacak. browser açıklane timer kullanarak belirli aralıklarla ajax isteği göndererek kendisine mesaj gelmişmi kontrol edebiliyoruz varsa bildirimle haber verebiliyoruz. fakat browser kapalıyken timer çalışmadığı için ajax gönderemiyoruz. bu durumda tarayıcı kapalıyken bildirim alma işini nasıl yapacağım
yardımcı olursanız ok sevinirim.
Merhaba,
İstediğiniz konu tam olarak push notification ile alakalı o yüzden onesignal gibi araçlar ile bu ihtiyacınızı giderebilirsiniz. Kullanıcı sitenizden bildirim alınması ile ilgili tarayıcı iznini verdiğinde onesignal üzerinden kolayca bildirim gönderebilirsiniz tarayıcı ve sayfanız kapalı olsa bile.
İyi çalışmalar