» » » » Javascript ile masaüstü bildirimi yapımı

Javascript ile masaüstü bildirimi yapımı

özkan arıcı
özkan arıcı Yönetici 20-07-2016, 20:51
Html5in yeni özelliklerini kullanarak masaüstü bildirimleri gönderebilirsiniz.Projelerinizde kullanarak tarayıcı simge durumuna küçültülmüş dahi olsa bildirim gönderebilirsiniz

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');" />
Bilgi
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.

Forum İstatistikleri

Üyelerimiz 61 onaylı konuda toplam 4 yorum yaptılar. Foruma en son 2017-02-07 12:25:25 tarihinde Mybb google seo eklentisi başlıklı konu eklendi.
Forumda toplam 61 konu bulunmaktadır.
Foruma eklenen 61 konudan 61 tanesi onaylandı.
Forumda 0 adet konu onay beklemektedir.
Forumdaki 61 adet onaylı konuya toplam 4 yorum yapıldı.