Html5 Notification (Bildirim) Özelliği

http://www.erbilen.net/demo/htm5_notification_test.html

Html5 Notification (Bildirim) Özelliği

Bu dersimde henüz bir taslak olmasına rağmen işe yarayan html5 nimetlerinden olan notifications özelliğinden bahsetmek istiyorum. Yararlı olması dileğiyle..Bu dersimde henüz bir taslak olmasına rağmen işe yarayan html5 nimetlerinden olan notifications özelliğinden bahsetmek istiyorum. Yararlı olması dileğiyle..

Kullanıcıdan İzin Almak

Bildirimlerin gözükmesi için kullanıcıdan izin alınması gerekir.. İzin almak içinse aşağıdaki işlemler yapılmalıdır;

if ( window.webkitNotifications.checkPermission() == 1 ){
	window.webkitNotifications.requestPermission();
} else {
	alert('Zaten bu site için işlem yapılmış');
}

checkPermission => izin kontrolüdür. Değeri 1 ise izin istenme işlemi yapılmamış, 0 ise yapılmış anlamındadır.
requestPermission => izin isteme metodudur.

Bildirimin Gözükmesi

Bildirimin kullanıcıya gözükmesi için aşağıdaki şekilde işlem yapılmalıdır;

var test = window.webkitNotifications.createNotification(
	'http://www.gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58',
	'Tayfun Erbilen',
	'Bu bir test içeriğidir..'
);
test.show();

createNotification => bildirim oluşturmak için gerekli metottur. 3 parametre alır bunlar sırasıyla resim, başlık ve açıklamadır.

Bildirim Göründü ve Kapatıldı Fonksiyonları

Bunun için aşağıdaki kodları kullanmanız yeterlidir;

test.ondisplay = function(){
	alert('bildirim göründü');
}
test.onclose = function(){
	alert('bildirim kapatıldı!');
}

Burada test değişkeni bir yukarıda oluşturulan bildirimi temsil etmektedir.

Demo

Videoda uyguladığım örneğe aşağıdaki linkten ulaşabilirsiniz;
http://www.erbilen.net/demo/htm5_notification_test.html

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Html5 Notification (Bildirim) Özelliği” üzerine 13 yorum

  1. Tayfun hocam herzaman ki gibi formunuzdasınız.
    Sizden öğrenmek istediğim HTML5 proğramınızda varmı bu başlık altında,detaylı olarak video paylaşımınız olacak mı?

  2. @Murat TAŞTAN, bu şekilde öğrendikçe ve vakit buldukça paylaşmayı planlıyorum..

  3. Tayfun hocam jquery kodlarını yukarıya yazdığımda çalışmadı 1-2 saat savaş verdikten sonra aşağıya aldım çalıştı. Bu aşağı yada yukarı yazma konusunda bir bilgi vermeniz mümkünmü? Ders için çok teşekkürler.

  4. @Uğur, jquery kodlarını yukarıda yazacaksan.. Sayfa hazır olduğunda bende hazırım demen gerekir.. Yani kısaca kodlarını aşağıdaki kodların içine yazman gerekir..

    $(function(){
    // kodlar buraya
    });
  5. Ya tayfun kardeş bu ekran kayıt programı olarak ne kullanıyorsun acaba?
    Anlatım için teşekkürler..

  6. Eline sağlık hocam Chrome eklentisi yazıyordum bu özelliği kullandım fakat otomatik kapanma olayı eksik istersen alttaki kodu derse ekleyebilirsin.

    setTimeout(function(){
    test.cancel();
    },2000);

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir