Bu kutucuklar HTML5’de bir fonksiyon olarak geliyor ve çok kullanışlı olduğu kesin. Javascript’ten bildiğimiz alert özelliğinin daha gelişmişi olarak sunuldu.
Bu görseldeki gibi görünüşü olan bu özellikte çalışma prensibi basit. Script olarak yazacağımız kodlarda, tarayıcının bildirim kutusunu destekleyip desteklemediğini kontrol ediyoruz. Sonra kullanıcıdan bildirim görüntüleyebilmek için izin istiyoruz. Ve fonksiyonumuzu çağırdığımızda bildirim kutucuğu görünüyor.
Uzatmadan kodlara geçeyim.
Script:
function bildirimkutusu () {
// Kullanıcının tarayıcısının destekleyip desteklemediğini denetleyelim
if (!("Notification" in window)) {
alert("Bu tarayıcı maalesef bildirim özelliğini desteklemiyor..");
}
// Kullanıcı önceden izin verdiyse
else if (Notification.permission === "granted") {
// Bilgilendirme bildirim kutusunu açalım.
var notification = new Notification('Bildirim kutusundan merhabalar', {
body: 'Bilgilendirme bildirim kutusu budur.',
icon: 'ikon adresi',
tag: 'demo',
dir: 'auto',
lang: ''
});
}
// Eğer kullanıcı kabul etmediyse
else if (Notification.permission !== 'denied') {
// Kullanıcıdan onay iste
Notification.requestPermission(function (permission) {
// Kullanıcı onaylamadı ise tekrar soralım
if (permission === "granted") {
// kullanıcı kabul ederse bildirimi aç
var notification = new Notification('Bildirim kutusundan merhabalar', {
body: 'Bilgilendirme bildirim kutusu budur.',
icon: 'ikon adresi',
tag: 'demo',
dir: 'auto',
lang: ''
});
}
});
}
}
HTML:
Uyarı:
Bu özelliği masa üstünde deneyemezsiniz. Masaüstünde denendiğinde bildirim ekranı gelmeyecektir. Bu yüzden sitenize yükleyin.
Eğer bu bildirim kutusunun belli süre sonra kendiliğinden kapanmasını istiyorsanız bunun da çözümü mevcut. Yapmanız gereken bu kodları, yukarıdaki kodların en üstüne eklemek.
function bildirimkutusu () {
setTimeout(function(){
notification.close();
},2000);
kaynak : HTML5 ile bildirimler nasıl kullanılır?