Friday, 3 August 2012

Network reachability code in Phone gap-Android

Phone Gap network check


Hello Friends,

Have you searching for how to check network connection in your
Phone Gap  Application ?

Here , I am sharing my network reachability code in phone gap
application.

Note:
        In some of the devices if you are trying to connect your app using GPRS.
In this case the connection type will be  'Unknown connection' so in my code i am
only checking following condition to show confirm dialogue.


if(networkStatusType == 'undefined' || networkStatusType == 'No network    
                     connection'){
         showConfirm();
}




Code:
Index.html

  <!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, height=device-height" />
  <title>Login Form</title>
  <link rel="stylesheet" href="css/style.css">
  

<link rel="stylesheet" href="css/jquery.mobile-1.0b3.min.css" />


<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0b3.min.js"></script>

<script type="text/javascript" src="js/phonegap-1.0.0.js"></script>
<script type="text/javascript" src="js/SQLStore.js"></script>
<script type="text/javascript" src="js/NWReachability.js"></script>
<script type="text/javascript">
var DEBUG_ANDROID_THEME=true;
$(document).ready(function() {
//initDB();
});

</script
</head>

<body>
<div data-dom-cache="true" data-role="page" id="page">
 <div data-role="header" data-position="inline" data-theme="b">
<h1>LOGIN</h1>
         </div>

  <div class="container">
    <section class="login">
      <!--  <h1>Login to VEO App</h1>  -->
      <form>
        <p>
          <input type="text" name="txtName" id="loginName" value="" placeholder="Username">        
        </p>
        <p>
          <input type="password" name="txtPassword" id="password" value="" 
          placeholder="Password" > 
        </p>
        <p class="submit" style="width: 100px;">
           <input type="button" name="commit" value="Login" onclick="loginvalidation();">
        </p>
      </form>
    </section>    
  </div>
</div>
  
</body>
</html>



In my NetworkReachability.js


/*function for login validation */


function loginvalidation() {
        var msg="";
        //msg="Wrong Input";
        var ck_name = /^[A-Za-z0-9_.]{3,20}$/;
        var name_int = /[0-9]/;
        var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{5,20}$/;
        var userName =$("#loginName").val();
        var password =$("#password").val();
        if(userName == "" || password == ""){
        msg="Please fill User Name and Password ";
            showErrorToast(msg);
        $("#loginName").focus();
        }
        else {
        var pos=userName.search(name_int);
        if(pos==0){
        msg="Invalid User Name "
        showErrorToast(msg);
        $("#loginName").focus();
                $("#loginName").val("");
        }
        else if(!ck_name.test(userName)){
        msg="Invalid User Name "
                $("#loginName").focus();
                $("#loginName").val("");
                showErrorToast(msg);
                }
        else if(!ck_password.test(password))
        {
        msg="Invalid Password "
                $("#password").focus();
                $("#password").val("");
                showErrorToast(msg);
               
        }
        else {
        var networkStatusType = checkConnection();
        alert(networkStatusType);
       
        if(networkStatusType == 'undefined' || networkStatusType == 'No network    
                     connection'){
        showConfirm();
        }
        else{
        //Your own call
        }
        
        
        }
        
     }
  }





//check network connection 
function checkConnection() {
    var networkState = navigator.network.connection.type;

    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';

    //alert('Connection type: ' + states[networkState]);
    var  networkStatus=states[networkState];
    return networkStatus;

}

function showConfirm() {
    navigator.notification.confirm(
        'No network connection'// message
        onConfirm,              // callback to invoke with index of button pressed
        'Please Check Network Setting.',            // title
        'Ok,Cancel'          // buttonLabels
    );
}

//process the confirmation dialog result
function onConfirm(button) {
    if(button==1){
     //your code
    }else {
       //your code
    }
}


I think this will help you... 
Enjoy Coding :)

Please Comment if you have any query.

Mukesh Yadav

Hi Guys I am from Delhi working as Web/Mobile Application Developer(Android Developer), also have knowledge of Roboelctric and Mockito ,android test driven development... Blogging has been my passion and I think blogging is one of the powerful medium to share knowledge and ideas....

0 comments:

Post a Comment

 

Copyright @ 2013 Android Developer Blog.

Blog Widget by LinkWithin