JavaScript Kullanarak Masaüstü Bildirimleri Göndermek

Bildiğiniz gibi HTML5 ile birlikte birçok yeni özellik girdi hayatımıza. Bunlardan bir tanesi de masaüstü bildirimleri. Bu özellik sayesinde tarayıcınız simge durumundayken bile bildirimleri alabiliyorsunuz. Bu özelliği projelerinde kullanmak isteyen arkadaşları düşünerek basit örneklerle bu özelliği nasıl kullanabileceğinizi anlatmak istedim.

Masaüstü bildirim özelliğini destekleyen tarayıcılarda kullanıcıdan onayı alarak rahatlıkla bildirimler gönderebiliyoruz. IE şuan için bu özelliği desteklemiyor sanırım. Testlerimde Chrome ve Firefox’da ise herhangi bir problemle karşılaşmadım.

Canlı Demo – Kodları İndir

Ben kısa bi şekilde örnek fonksiyon hazırladım. Bu fonksiyon yardımıyla dinamik olarak farklı başlık ve içeriğe sahip bildirimler oluşturabiliyorsunuz.

function masaustuBildirim(baslik, detay, link, resim) {
        //Resim gönderilmemişse varsayılan resim belirtiliyor
        if (resim == undefined) {
            resim = 'http://placehold.it/50x50';
        }
        
        //Tarayıcı desteği kontrol ediliyor
        if (!window.Notification) {
            alert('Tarayıcınız masaüstü bildirimleri desteklemiyor!');
            return;
        }

        //Daha önceden izin alınmamışsa izin alınıyor
        if (Notification.permission !== "granted")
            Notification.requestPermission();

        //Belirtilen detaylara göre bildirim gösteriliyor
        var notification = new Notification(baslik, {
            icon: resim,
            body: detay
        });

        //Bildirime tıklanınca açılacak sayfa ayarlanıyor
        notification.onclick = function() {
            window.open(link);
        }
}

Normal bir bildirim için aşağıdaki gibi bir kullanım yeterli olacaktır.

<input type="button" value="Standart Bildirim" onclick="masaustuBildirim('Standart Bildirim','Standart bildirim özelliğini test ediyoruz!','http://www.ahmetiscan.web.tr/');" />

Resimli bildirim göstermek istiyorsak da fonksiyona ek bir parametre daha göndermemiz yeterli olacaktır.

<input type="button" value="Resimli Bildirim" onclick="masaustuBildirim('Resimli Bildirim','Resimli bildirim özelliğini test ediyoruz!','http://www.ahmetiscan.web.tr/', 'http://www.patabilisim.com/themes/site/images/logo.png');" />

Canlı Demo – Kodları İndir

Projenizde ihtiyacınıza göre farklı şekillerde bu bildirimleri çıkarabilirsiniz. Bundan sonrası tamamen size kalmış.