Önceki


Sonraki

HTML5 ile Kullanıcının Bağlantı Tespiti (Offline / Online API)  Tam Ekran

Bazı uygulamalarda gözünüze çarpmıştır.Uygulama internetiniz koptuğunda sizi bilgilendirir.Buna örnek olarak facebook sohbetde bağlantınız koptugunda sohbete bağlanamıyor gibi bir uyarı mesajı yer alır.Bu özellik gibi küçük detaylar her zaman kullanıcının dikkatini çekmiş ve mutlu etmiştir.Bizde kullanıcımızın bağlantısını kontrol edip bağlantı koptuğunda mesaj vermesini sağlayacağız.

Çok daha detaylı bilgiyi Google da HTML5 Offline / Online API olarak aratırsanız bulabilirsiniz

Demo Uygulama


Öncelikle javascriptin addEventListener fonksiyonunu bir döngü gibi kullanabilmemiz için bir fonksiyon tanımlayalım

  var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

Sonrasında internetimizin durumunu saklamak için bir değişken tanımlayalım

var netstatus;

HTML5 ile gelen bu özellik sayesinde javascriptde navigator nesnesini kullanarak bağlantımızı kontrol edeceğiz.Demo için bootstrap modal kutusunu kullanacağım

function online(event) {
     // Online ise netstatus onlie olsun değil ise offline 
     netstatus = navigator.onLine ? 'online' : 'offline';

     // Değişken Durumumuza göre bootstrap modal kutumuzu ekranda göstereceğiz
	 if(netstatus=='offline') { $("#internetstatu").modal("show"); }

     // Online olursa gizle ..
	 else { $("#internetstatu").modal("hide"); } 
}
addEvent(window, 'online', online);
addEvent(window, 'offline', online);
online({ type: 'ready' });

Modal Kutusununda içinde bulunduğu çalışır HTML ve Javascript Kodlarımız


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Offline / Online Api Bağlantı Tespiti</title>
	
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	var addEvent = (function () {
	  if (document.addEventListener) {
		return function (el, type, fn) {
		  if (el && el.nodeName || el === window) {
			el.addEventListener(type, fn, false);
		  } else if (el && el.length) {
			for (var i = 0; i < el.length; i++) {
			  addEvent(el[i], type, fn);
			}
		  }
		};
	  } else {
		return function (el, type, fn) {
		  if (el && el.nodeName || el === window) {
			el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
		  } else if (el && el.length) {
			for (var i = 0; i < el.length; i++) {
			  addEvent(el[i], type, fn);
			}
		  }
		};
	  }
	})();
	var netstatus;
	function online(event) {
		 netstatus = navigator.onLine ? 'online' : 'offline';
		 if(netstatus=='offline') { $("#internetstatu").modal("show"); }
		 else { $("#internetstatu").modal("hide"); } 
	}
	addEvent(window, 'online', online);
	addEvent(window, 'offline', online);
	online({ type: 'ready' });
	</script>
</head>
<body>
	<div class="container"><br>
		<div class="well well-sm" style="padding-left:30px;">
			<h3>Demoyu Test Etmek için Lütfen internet bağlantınızı kesin..</h3>
			<p> Diğer HTML5 yazılarını Okumak için <a href="http://mustafaercel.com/tag/html5">Bu Adresi</a> ziyaret edebilirsiniz</p>
		</div>
	</div>
</body>
</html>
   <div id="internetstatu" class="modal fade in" tabindex="-1" aria-hidden="false" style="display: none;">
	<div class="modal-dialog">
	   <div class="modal-content">
		  <div class="modal-header">
			 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
			 <h4 class="modal-title">Durumunuz</h4>
		  </div>
		  <div class="modal-body">
			<h4 style="font-family:Tahoma;"><i class="icon-signal
			"></i>&nbsp;  İnternet Bağlantınız Kesildi.Lütfen Bağlantınızı Kontrol Ediniz</h3>        
		 </div>
		  </div>
	   </div>
</div>

Henüz yorum yapılmamış

Arama
Beni yukari isinla