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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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.
|
1 |
<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.
|
1 |
<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');" /> |
Projenizde ihtiyacınıza göre farklı şekillerde bu bildirimleri çıkarabilirsiniz. Bundan sonrası tamamen size kalmış.
Derslerimin ve yazılarımın düzenli olarak e-posta adresinize gelmesini isterseniz sayfanın aşağısında yer alan abonelik bölümünden blogumun e-posta listesine abone olabilirsiniz :)
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?
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.
Merhaba Çalışmakta Ancak Butona Basınca Bunun Facebook Gibisi Yokmudur ? Gönderi Yazı Paylaşınca Devreye Girsin Masaüstü Bildirimi Atsın ?
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.