HTML5 Bildirimler(Notification)

HTML5 API’leri, mobil uygulamalarda olup web sayfalarında kullanamadığımız özellikleri API olarak ekleyerek eksikleri gideriyor. Bunlardan bir tanesi de Web Notification API. Mobil uygulamlarda kullanıcıya anlık bildirimler göndermek için kullanılan bilgileri bu API sayesinde web sayfalarımızdan da yapabiliyoruz.

HTML5 ve CSS3 özellikleri hala geliştirilmekte olduğu için zamanla değişim gösterebiliyor. Bu özellikte ilk çıktıktan sonra güncellendi ve 19 Nisan 2014’de onaylanarak kararlı hale geldi.

Kullanıcıyı bilgilendirmek için çok güzel bir yöntem.

Bu işi nasıl yaptığımıza bakalım.

Tarayıcı desteği kontrolü

İlk olarak kullanıcının tarayıcısı bu özelliği desteliyormu kontrolünü yapalım.

// İlk kontrol tarayıcının bu özelliği destekleyip desteklemediğini sorgulamak
if (!("Notification" in window)) {
  alert("Bu tarayıcı web bilgilendirme özelliğini desteklemiyor.");
}

Burada uyarı vermek yerine desteklemeyenler için çözüm üreten sistemler entegre edilebilir. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#notification-api

Kullanıcıdan izin alma kısmı

HTML5’in yeni API’lerinde bir özelliği kullanıcıya sorupta kullanma pratiği yaygınlaşıyor. HTML5 Bildirimlerinde de aynı durum söz konusu. Kullanıcıya bildirim almak istermisin diye soralım.

// Daha önce kullanıcı izin verdi ise
else if (Notification.permission === "granted") {
    // Bilgilendirme popup'ını çıkaralım.
    var notification = new Notification("Merhaba dünya!");
}

Eğer onay yoksa tekrar onay isteme ve bildirim oluşturma kısmı

// Eğer onay yoksa
else if (Notification.permission !== 'denied') {
// Kullanıcıdan onay ise
Notification.requestPermission(function (permission) {
  // Kullanıcı onaylamadı ise tekrar soralım
  if (permission === "granted") {
    // onaylarsa bilgilendirme popup'ı aç
    var notification = new Notification("Merhaba dünya!");
  }
});
}