HTML5‘in getirdiği kolaylıkları konuşmaya devam ediyoruz. Bugünün konusu da Push Notification diye tanımlanan, tarayıcı merkezli bildirimler olacak.

Popüler web görüntüleyicilerin de desteğini yavaş yavaş almaya başlayan HTML5 bildirimleri artık bizim de gündemimizde.

Örnek Göster

HTML5 Bildirimleri
Diğer bütün HTML5 yenilikleri gibi bildirimler de basit bir şekilde kullanılabiliyor. Bir script elemanı içerisinde tanımlanabilen kod özgünleştirme öğeleriyle birlikte de çalıştırılabiliyor.

Temel yapı şu şekilde :

var notification=new Notification('Bildiri Başlığı',{
body:'Bildiri mesajı buraya gelecek.'
});

body alanı bahsettiğimiz özgünleştirme öğelerinden sadece birisi. Devamı ise şu şekilde :

dir: Bildirinin akış yönü. Auto, rtl(soldan sağa) ya da ltr(sağdan sola) olarak tanımlanabilir.
body: Bildiri içeriği.
lang: Bildiride kullanılan dili belirtiyoruz.
tag: Bildiriyle ilişkilendirmek istediğimiz id’yi etiketliyoruz.
icon: Bildirinin yanısıra gözükmesini istediğimiz resimin URL’ini giriyoruz.
Bunlara ek olarak event handler listesi de şu şekilde : onclick, onshow, onerror, onclose

Bildirimler yalnızca belirli bir süre gözüksün

Uzun süre ekranda asılı kalan bildirimler kullanıcının dikkatini dağıtacaktır. Dolayısıyla bildirimleri belirli bir müddet sonra gizlemek isteyebilirsiniz. Bu durumda da aşağıdaki kodu kullanmanız yeterlidir.

setTimeout(function(){
notification.close();
},2000);

Milisaniye cinsinden bildirinin gözükme süresini belirtiyoruz.

Kullanıcıdan bildirim göstermek için izin isteme

Bildirimleri yayınlamadan önce kullanıcı onayı almak gerekebiliyor. Bu prosedür için de aşağıdaki kod öbeği içerisinde bildirimlerinizi listelemeniz yeterlidir.


Notification.requestPermission(function(permission){
//bildirimlerinizi burada gösterin
});

Destekleyen Tarayıcılar
HTML5 bildirileri Chrome 22 ve Firefox 22 tarafından desteklenmekte. Mobil tarafta ise yalnızca Firefox tarafından sınırlı kapsamda destek bulmakta. Ancak ilerleyen günlerde bu liste büyük bir ivmeyle genişleyecektir.

Ayrıca kullacının tercih ettiği tarayıcı HTML5 Notification desteği barındırmıyorsa onlara özel bir alert gösterilebilir.

Kodlar

if (!("Notification" in window)) {
alert("Tarayıcınız HTML5 bildirimlerini desteklemiyor.");
}

Kaynak: http://www.sanalyer.com/makale/html/html5-bildirimleri/