Javascript notification api kullanımı

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ı

Javascript notification api

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.

pasted%2Bimage%2B0

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.

Ş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.


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.


Onay pencersini programatik olarak kapatmak istersek notification.close() gibi bir kod fonksiyonu kullanarak kapatabilirsiniz.

Event’ler

EventAçıklama
Notification.oncloseNotification kullanıcı tarafından kapatıldığında tetiklenecek event.
Notification.onshowNotification gösterildiğinde tetiklenecek event.
Notification.onclickNotification’a tıklandığında tetiklenecek event.

Bir üstteki örnek koda event’lerimizi ekleyelim.

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.

974148b4 17e3 44b3 a301 ca91f55b831f

Hangi tarayıcıların hangi versiyondan itibaren destekleyip desteklemedikleri hakkında detaylı grafik. Kaynak: https://caniuse.com/#feat=notifications

 

Kaynaklar

4.7/5 - (4 votes)

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya Devam Edin