PhoneGap Connection Tutorial

The connection page show the all available network connection states available in PhoneGap.
Then the currnet state is checked against an hash which translate the state to a more human readable format.

First we get the network state:

    var networkState = navigator.network.connection.type;

Then, loop through all available states, print them in human readable format, highlight the current state and then
put the result in the

.

		var networkStateText  = "";
		
    	for (var key in states) {
    		if ( key == networkState ) {
    			networkStateText += "" + states[key] + "
"; } else { networkStateText += "" + states[key] + "
"; } }

Source Code:

Javascript

    //*********************************************************    
    // Connection Capabilities
    //*********************************************************    
    function getConnectionReady() {
    	var states = {};
		states[Connection.UNKNOWN]  = 'Unknown connection';
		states[Connection.ETHERNET] = 'Ethernet connection';
		states[Connection.WIFI]     = 'WiFi connection';
		states[Connection.CELL_2G]  = 'Cell 2G connection';
		states[Connection.CELL_3G]  = 'Cell 3G connection';
		states[Connection.CELL_4G]  = 'Cell 4G connection';
		states[Connection.NONE]     = 'No network connection';
   	
    	var networkState = navigator.network.connection.type;
		var networkStateText  = "";
		
    	for (var key in states) {
    		if ( key == networkState ) {
    			networkStateText += "" + states[key] + "
"; } else { networkStateText += "" + states[key] + "
"; } } $("#connectionProperties").html(networkStateText); } //********************************************************* // initialize the environment //********************************************************* $("#connectionMainPage").bind("pagebeforeshow", function() { getConnectionReady(); }); $("#refreshConnectionButton").bind("vclick", function() { getConnectionReady(); });

HTML 5/JQuery Mobile

<!DOCTYPE HTML>
<html><head><title>Connection</title></head>
<body>
	<!-- -------------------------------- Connection ------------------------------------ -->
	<div data-role="page" id="connectionMainPage" data-add-back-btn="true" back-btn-text="back">
		<div data-role="header">
			<h1>Connection</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">
				<div id="connectionProperties" class="mesgBox"></div>
			</div>
			<button id="refreshConnectionButton">Refresh</button>
		</div>
		
		<script type="text/javascript" charset="utf-8" src="js/connection-min.js"></script>
	</div>
</body>
</html>