kişisel düşünceler, üstüne bir de teknoloji..

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ı DemoKodları İ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ı DemoKodları İndir

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

4 Comments

  1. bitaraf

    Merhaba,
    Bilgiler için teşekkürler. Çokça araştırmama rağmen kesin sonuca ulaştıran bir kaynak bulamadım.
    Sekme kapalıyken de bildirim gönderebilmenin yolu nedir?
    Masaüstü bildirimlerin gittiği sayfa tarayıcıda açık olmasa da bildirim gönderme imkanımız var mıdır?

    • Ahmet İşcan

      Merhaba,
      O konuyu yazıyı yayınladıktan sonra bende merak ettim ama çok araştırma yapma fırsatım olmadı. Eğer bilgi edinirsem blogumda da paylaşmaya çalışırım.

  2. Ramazan

    Merhaba Çalışmakta Ancak Butona Basınca Bunun Facebook Gibisi Yokmudur ? Gönderi Yazı Paylaşınca Devreye Girsin Masaüstü Bildirimi Atsın ?

    • Ahmet İşcan

      Merhaba, bilemiyorum ben temel kullanımını göstermek istedim sadece. Daha detaylı araştırmayı kullanım amacınıza göre yaparsanız daha net kaynaklara ulaşabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir