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.
