HTML5 ile Browserlarda Bildirim (Notification) Kullanımı
Malum, kış geldi. İş yerine gitmeyip evden çalışmaya karar verdik. İşyerinde kullandığımız Hipchat’i indirmek için web sayfasına girdiğimde online application’unun olduğunu farkedince gireyim dedim. Konuşmaların sağ taraf köşelerde bildirim olarak gelmesi beni araştırmaya iten sebep oldu.
Bildirim Özelliğinin Desteklenip Desteklenmemesi
CSS3, HTML5 derken kimi özellikler browser’lara hemen implemente ediliyor kimisi de gecikmeyle geliyor. Bu konuda yardımımıza da Modernizr koşuyor ki burada da bu nimetten faydalanalım.
[code lang=“js”] if ( “Notification” in window ) { console.log(“Destekeniyor.”); } else { console.log(“Desteklenmiyor.”); } [/code]
Bildirim Özelliği için İzin Alımı ve Uygulanması
Bu bölümde kullanıcıdan bildirim gösterimleri için izin almamız gerekiyor. Genellikle bu bölümü herhangi bir trigger ‘a bağlamak gerekebilir ki kullanıcının karşısına web sayfasına girince izin barı çıkmasın. Bilgilendirme API’si için bilgilendirme şart.
[code lang=“js”] if (Notification.permission === “granted”) { var notification = new Notification(“Merhaba İbrahim!”); } [/code]
Basit bir şekilde izin alımını sağladıktan sonra uygulama için de :
[code lang=“js”] if (Notification.permission === “granted”) { var notification = new Notification(‘Merhaba İbrahim!’, { body: ‘Buraya göstermek istediğimiz mesajı yazıyoruz.’, icon: ”, tag: ‘demo’, dir: ‘auto’, lang: ” }); } [/code]