I wanted a way to check to see when connection to a network was lost, and if it was lost show a message alerting the user. Lets put in perspective, say you are  out and about and happen to want to enroll to a new service and they happen to have a long sign up form. You fill out all those 20 fields and get to the submit button but the form bombs out because your network connection was lost. This would frustrate you and would turn you away from this service. The idea with this is to show the user a nice message warning them that connection was lost and hopefully they wait and successfully sign up to your service.

How:

There are two new HTML5 properties added to the window.navigator object, and they are offline and online. The example code below checks if window.navigator.online returns true, if so it will display a green message. If window.navigator.online return false then you will see a red message.

Note: I went with a jQuery approach for the demo, you can obviously write it without the helping hand of jQuery.


<!doctype html>
 <html class="no-js" lang="en"> 
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Net Connection</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
	
          $(function(){
		 
               if (!window.navigator.onLine) {
			$("#status").addClass('lost').text("You lost the internets!");
		} else {	
			$("#status").addClass('active').text("You have the internets!");
		}
		document.body.addEventListener("online", function () {
			$("#status").addClass('active').text("You have the internets!");
		}, false);
		document.body.addEventListener("offline", function () {
			$("#status").addClass('lost').text("You lost the internets!");
		}, false);

	});

	</script>
	<style type="text/css">	
		body{background-color:#efefef;margin:0;padding:10px;}
		h4{font-size:16px;margin:10px 0 10px 0;font-family:arial;text-shadow:0 1px 0 white;color:#333;padding:0 0px;}
		#status{text-align:center;padding:50px;color:white;font-family:arial;font-weight:bold;}
		.active{background-color:#8fc400;}
		.lost{background-color:red;}
	</style>
</head>
<body>
	<h4>Internet Connectivity Check</h4>
	<div id="status"></div>
</body>
</html>

[button url=”http://www.mobilelicio.us/lab/net-check/” style=”orange” size=”small”] View Demo[/button]