• Özkan Arıcı

  • 2.619 görüntülenme

  • 30 Aralık 2015

  • 0

  • 1

Javascript ile masaüstü bildirimi yapımı

Html5in yeni özelliklerini kullanarak masaüstü bildirimleri gönderebilirsiniz.Projelerinizde kullanarak tarayıcı simge durumuna küçültülmüş dahi olsa bildirim gönderebilirsiniz

Bunun için öncelikle js kodlarımızı yazıyoruz

function masaustuBildirim(baslik, detay, link, resim) {
        //Resim gönderilmemişse varsayılan resim belirtiliyor
        if (resim == undefined) {
            resim = 'http://siteniz.com/resimlinki/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);
        }
}

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);
        }
}

Daha sonra iki buton ekliyoruz test etmek amacı için

<input type="button" value="Standart Bildirim" onclick="masaustuBildirim('Standart Bildirim','Merhaba ! Ben Standart bir bildirimim ','http://www.ozkanarici.com/');" />
<input type="button" value="Resimli Bildirim" onclick="masaustuBildirim('Resimli Bildirim','Merhaba ! Ben resimli bir bildirimim','ozkanarici.com/', 'http://www.patabilisim.com/themes/site/images/logo.png');" />

örneği geliştirerek farklı şekillerde ve farklı durumlarda bildirimler göstertebilirsiniz

Yazar: Özkan Arıcı

357 yazı yazmış
Profilini Gör
YORUM YAP

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

*

code