May.27

HTML5 API’leri ile Çalışmak – Ders 11 : Notifications API

Notifications API’yi belki son zamanlarda sıkça görüyorsunuzdur. Özellikle de alışveriş sitelerinde güncel kampanyalardan müşterileri haberdar etmek için kullanılır. Asıl amacı fayda vermek olsa da şahsi görüşüme göre zorla bilgi dayatılması amacıyla kullanılan ve insanları rahatsız eden bir bildirim aracı olduğunu düşünüyorum. Çünkü bildirim yapan web sayfasını açtığınızda, o sayfanın sekmesinde değilseniz bile (yani başka bir sayfadaysanız) yine size ekranın sağ alt köşesinde (dikkat, tarayıcının değil!) bildirim gönderebilir. Bunun nedeni, o bildirimin web sayfası ile bir arayüz bağlantısı olmaması, tamamen tarayıcının bir özelliği olmasından dolayıdır. Notifications API, tarayıcının bildirim araüyüznün açılmasını tetikler. Kullanıcı isterse bu bildirimi kapatabilir, hatta bildirim ayarlarına girerek o sayfayı bir daha bildirim yapamaması için bloklayabilir. Mesela Google Chrome’da şu adrese girildiğinde bildirim yapan web sayfalarının listesi ve izinleri görülebilir.

chrome://settings/content/notifications

Mozilla Firefox’ta da şu adrese girilip bildirim ayarları düzenlenebilir.

about:preferences#content

Şimdi basit bir örnek üzerinden Notifications API’yi inceleyelim…

Yaptığımız bu örneği localhost üzerinden çalıştırıyoruz, isterseniz bir sunucuda da çalıştırabilirsiniz. Notifications API, bildirimin yapıldığı domain’i ister.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
   </head>
   <body>
   </body>
   <script>
   	// Eğer tarayıcı Notification API'yi destekliyorsa...
   	if("Notification" in window){
                  // Eğer daha önce izin verilmişse...
                  if(Notification.permission == "granted"){
                         // Bildirimi göster.
                 	 var bildirim = new Notification("%40 İndirim!", {
                                    "body":"Babalar gününe özel indirimleri kaçırmayın", 
   	   	   	"icon":"hediye.png"
            });
        // Eğer izin verilmemişse…
        } else{
                  // İzin talebi için kullanıcıya sor.
                  Notification.requestPermission(function (permission) {
                  // Eğer kullanıcı izin verirse...
                  if (permission === "granted"){
                	// Bildirimig öster.
                        var bildirim = new Notification("%40 İndirim!", {
                                    "body":"Babalar gününe özel indirimleri kaçırmayın", 
                                    "icon":"hediye.png"
                    });
                }
            });
        }
    }else{
           console.log("Tarayıcı Notfication API'yi desteklemiyor.");
    }       
   </script>
</html>

Kodlar arasında yer alan açıklama satırlarını okuyunuz.

Notifications API’yi kullanmadan önce her zamanki gibi tarayıcı desteği var mı diye bakılıyor. Eğer tarayıcı desteği varsa, bu sefer de daha önce bu siteden (yani domain’den) daha önce bildirim gösterilmesi için kullanıcıdan izin alınmış mı diye bakılıyor. Eğer permissions değeri granted ise, izin verilmiş demektir. Sonrasında hemen bildirimimizi göstermek için yeni bir Notification nesnesi tanımlıyoruz. Aldığı 2 adet parametre vardır. Birinci parametre bildirimin başlığıdır (%40 İndirim!). İkinci parametre ise Object olarak bildirimin ayarlarıdır. İki adet ayar kullandık; bunlar icon ve body. body özelliği bildirimin içeriğini belirtir (Babalar gününe özel indirimleri kaçırmayın.). icon ayarı ise, bildirimde gösterilecek olan ikonun yoludur (hediye.png).

Eğer daha önce bu siteden bildirimler için bir izin alınmamışsa, kullanıcıdan izin alınması için Notification.requestPermission ile izin alma arayüzü açılacaktır. Kullanıcının girdiği değer (olumlu veya olumsuz) fonksiyona permissions değeri olarak gönderiliyor. Gönderilen bu değere de bir if sorgusunda bakılıyor. Eğer bu değer granted olarak dönmüşse, tekrar bildirim göstermek için Notification nesnesi oluşturuluyor.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum