HTML5 Masaüstü ekrana bildirim gönderme kodu

HTML5 Masaüstü bildirimleri gönderme

Merhaba
Web projelerinde masaüstü bildirim konusunda daha önce Facebookun örneğini görmüştüm.
Bir projemde de böyle bir eklenti yapmak istediğimde çalışan kodu birkaç denemeden sonra buldum.

Yanlız not : Eklediğim kodda offline çalışma mantığı yoktur.Ne işe yarar diye soracaksanız şöyle ki signalr gibi bir şey çalıştırıyorsanız ordan basabilirsiniz.Yada kullanıcı farklı sekmedeyse yeni verinin farkına varabilir.

Ekrana yazdığınız yazıyı bildirim olarak atayan JavaScript fonksiyonu örneği ;

var isNotify = true;
function notifyMe(message) {
console.log('Bildirim gönderme fonksiyonu çalıştı');
        if (!isNotify) return;  /* bu kısım kullanıcıya ekran üzerinde bildirimleri kapatma seçeneği sunar. */

        if (!Notification) {
/* Burası browserin notificationu desteklemediği durumda ortaya çıkar */
            console.log('Notifications are supported icn modern versions of Chrome, Firefox, Opera and Firefox.');
            return;
        }
console.log(Notification.permission); /* Bildirimle ilgili durumu logda gösterir.Eğer granted ise izin verilmiş demektir bu durumda bildirimi ekrana gönderebiliriz. */
        if (Notification.permission !== "granted")
         {  
console.log('Henüz onay alınmadığı için kullanıcıya ekranda soracak popupu açıyor');
Notification.requestPermission();
}

Burada ise bildirimi oluşturup ekrana gönderiyoruz
        var notification = new Notification('Bildirim Başlığı', {
            icon: 'www.resim.jpg', /*Burası bildirim geldiğinde gözükecek resim*/
            body: message   /* Burası bildirimin içeriği */

        });
    }

HATA NOTU :

Bu konuda localde çalışırken bildirim gözükmeyebilir.Browserin ayarlarını açmanız gerekiyor.

Google chrome için : ayarlar > içerik ayarları > tüm siteler için bildirimlere izin ver kısmını açmanız gerekiyor.