HTML5 Bildirimleri

html5-notificationHTML5‘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.

ÖRNEĞİ GÖRÜNTÜLE

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 :

  1. dir: Bildirinin akış yönü. Auto, rtl(soldan sağa) veya ltr(sağdan sola) olarak tanımlanabilir.
  2. body: Bildiri içeriği.
  3. lang: Bildiride kullanılan dili belirtiyoruz.
  4. tag: Bildiriyle ilişkilendirmek istediğimiz id’yi etiketliyoruz.
  5. icon: Bildirinin yanında gözükmesini istediğimiz görselin URL’ini giriyoruz.

Bunlara ek olarak event handler listesi de şöyle : onclick, onshow, onerror, onclose

Bildirimler sadece 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 süre sonra gizlemek isteyebilirsiniz. Bu durumda da aşağıdaki kodu kullanmanız yeterli olacaktır.

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 işlem için de aşağıdaki kod öbeği içerisinde bildirimlerinizi listelemeniz yeterli olacaktır.

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

if (!("Notification" in window)) {
    alert("Tarayıcınız HTML5 bildirimlerini desteklemiyor.");
  }
Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #5