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/50×50’;
}
//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ış.