HTML5 Notification API / Masaüstü Bildirimleri

Bu yazıda HTML5 ‘ in yeni özelliklerinden olan notification apiyi tanıyacağız.Notification api herhangi bir istekte kullanıcının masaüstünde bir bildirim oluşturur ve bu bildirim tarayıcı kapansa dahi çalışabilir.Tabi bu uygulama için kullanıcıdan tarayıcı vasıtasıyla izin almak gerekir..

Öncelikle ben chrome ile test ediyorum tüm tarayıcılar bu apiyi destekleyemeyebilior (örn ie)
Destekleyen tarayıcılar için http://caniuse.com/#feat=notifications

DemoDosyaları İndir

Bu özelliği kullanmadan önce yapmamız gereken 2 adım var

  • Tarayıcı Desteğini kontrol etmek
  • Kullanıcıdan bildirimler için izin almak
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
    }

Tarayıcımız html5 in bu özelliğini destekliyormu önce kontrol edelim,

Tarayıcı İzinlerini alalım

Bu özelliğin aktif olması için kullanıcıdan izin almanız gerekiyor,

if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
            if (!('permission' in Notification)) {
              Notification.permission = permission;
            }
            if (permission === "granted") {
                // izin verildiyse buraya bildirimi göster 
            }
        });
  }

Öncelikle kullanıcı tarafından engellenmemişsek , tarayıcısına izin isteği yolluyoruz , gelen izni kontrol edip
izni aldıktan sonra yolumuza devam ediyoruz

Bildirimi Gösterelim

Bir bildirim oluşturucaz , Bildirimde bir başlık , içerik , ikon ve yönlenecegi link olduğunu varsayalım

var options = {
        body: 'İçerik burda',
        icon: 'ikon linki',
        dir : "ltr" // soldan sağa yazım arapça , farsça için (rtl)
     };
var notification = new Notification("Başlık",options);
notification.onclick = function() { 
     window.open(href);
};

Yeni bir notification nesnesi oluşturuyoruz ve parametre olarak başlık , ve ayarların oldugu bir obje yolluyoruz.
Sonra bir event yazarak notificationa tıklandıgında ne yapılsın onu tanımlıyoruz

Çalışır Kodun Tamamı

Yukardaki örneklerden durumu kavradıysak , bu kodları kullanarak calısır bir örnek olusturalım.Bir fonksiyon yazalım parametre olarak başlık , içerik , ikon ve link alsın.Sonrasında bu fonksiyonu istediğimiz yerde çağırabiliriz.Demo sayfasının kodunu sayfanın başında bulabilirsiniz

<script>
		function notifyMe(title,content,img,href) {
    
			var options = {
				body: content,
				icon: img,
				dir : "ltr"
			 };
			if (!("Notification" in window)) {
				alert("This browser does not support desktop notification");
			}
			else if (Notification.permission === "granted") {
				var notification = new Notification(title,options);
				notification.onclick = function() { 
				   window.open(href);
				};
			}
			else if (Notification.permission !== 'denied') {
				Notification.requestPermission(function (permission) {
					if (!('permission' in Notification)) {
					  Notification.permission = permission;
					}
					if (permission === "granted") {
						var notification = new Notification(title,options);
						notification.onclick = function() { 
						   window.open(href);
						};
					}
				});
		  }
		}
		
		function show() {
		     notifyMe("test","test",'logo',"https://mustafaercel.com");
		}
			
	</script>

Bildirim Göster / izin Al

HTML5 Notification API / Masaüstü Bildirimleri” hakkında 6 yorum

    1. chrome için ayarlar sekmesinde içerik ayarlarına gelin orda bildirimler kısmında istisnaları yönet derseniz görebilirsiniz izin verilen siteleri

  1. Perfectly written!
    I’ll right away grab your rss as I can not in finding your
    e-mail subscription hyperlink or newsletter service.
    Do you’ve any? Please allow me understand so that I may subscribe.

    1. Uygulanabilir, sadece şablonlara javascript yazmanız yeterli
      Ayrıca firebase kullanarak service workerlarla facebook tarzı her zaman çıkan bildirimlerde yapabilirsiniz

Bir Cevap Yazın

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