HTML5 ile Bildirim (Notification) Gönderme

Merhaba arkadaşlar;

HTML5 ile hayatımıza giren bu güzel özellik ile eminimki bir çok kez karşılaşmışsıızdır. Google (Gmail), Facebook, Twitter gibi dünya devleri uzun zamandır kullanmaya başlamıştı. Şimdi ise her geçen gün bu özelliği kullanan site sayısı artmaktadır. Aslında olabildiğine basit olan bu yöntemle yeni yazılarınızı ve haberlerinizi anlık bildirimlerle ziyaretçilerinize gönderebilirsiniz. Gönderdiğiniz bildirimler aşağıda ki resimde görüldüğü gibi çıkacaktır. 

Bildiriimleri göndermek için öncelikle aşağıdaki satırı projemize ekleyerek ilgili jQuery kütüphanesini çağırıyoruz.

<script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>

Bildirim göndermeden önce tarayıcımızın bu bildirimleri destekleyip desteklemediğine bakacağız. Onuda aşağıdaki kod ile yapabiliriz;

if (!("Notification" in window)) {
  alert("Tarayıcınız, bildirim almayı desteklemiyor!");
}

Destekliyorsa, ikinci aşamada, bildirim göndermek için kullanıcıdan izin alacağız;

if (Notification.permission !== 'denied') {
    // daha önce bildirimlere onay verilmediyse önce onay istenecek
	Notification.requestPermission(function (permission) {
	// Kullanıcı onaylamadı ise tekrar soralım
	if (permission === "granted") {
	    // onaylarsa bilgilendirme bildirimi gönderilecek
		var notification = new Notification('Kodaktuel.com', {
		body: 'Artık Kodaktuel.com yazılarından anında haberdar olacaksınız. Teşekkür ederiz.', 
		icon: 'http://kodaktuel.com//upload/dosya/kodaktuellogo_15798a891749d0.png'
		});
	}
    });
}

Bu kodları biraz daha yakından inceleyelim isterseniz;

 * if (Notification.permission !== 'denied') ifadesi ile eğer bildirimlere izin verilmediyse aşaıdaki işlemleri yap demiş olduk. Orada 'denied' yerine 'granted' yazsaydık izin verildiyse olurdu.

* Notification.requestPermission(function (permission) ifadesi ile kullanıcıya hemen bildirimleri isteyip istemediğini sorduk yani izin aldık.

* if (permission === "granted") burada ise izin istedikten sonra, kullanıcının izin verip vermediğini öğreniyoruz ve eğer izin verdiyse aşağıdaki satırları koş demiş oluyoruz.

* Notification fonksiyonu ile bildirim oluşturuyoruz.  Bunun ilk parametresi bildirimimizin başlığı oluyor. Sonrasında gelen body değişkenine bildirimde görünecek ana mesajı yazıyoruz. Icon değişkenine bildirim de görünecek ikon'un url'sini yazıyoruz.  

Bu değişkenlerdeki değerlerin nerede ve nasıl görüldüğünü daha iyi anlamak için buraya tıklayarak bildirim göndermenin canlı demosunu deneyebilirsiniz. 

Bildirimleri hangi tarayıcıların desteklediğinide aşağıdaki resimde görebilirsiniz;

Şimdilik bu konuda anlatacaklarım bu kadar dostları. İlerleyen günlerde bu bildirimleri nasıl dinamikleştiirebileceğimize bakacağız. 

Aklınıza takılan veya benim anlatamadığım bir yer olursa lütfen yorum kısmından yazarak sorunuz. Allah'a emanet olun.