CODEWITHSUNDEEP
javascriptandroidcordovaphonegap-pluginsphonegap
Javith J
Javith J

Reputation: 77

Check internet connectivity in mobile application using phonegap

On creating the mobile app in phonegap, I would like to show an alert message regarding internet connectivity as online / offline. But I do not get the alert message. I used

cordova-plugin-network-information

plugin with the code below on my js file

<script type="text/javascript">

var networkState = navigator.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.CELL]     = 'Cell generic connection';
states[Connection.NONE]     = 'No network connection';

alert('Connection type: ' + states[networkState]); </script>

Can any one help me with the solution?

Upvotes: 1

Views: 438

Answers (2)

Ramprasath Selvam
Ramprasath Selvam

Reputation: 4448

First add the below Cordova plugins:

cordova plugin add cordova-plugin-network-information

cordova plugin add cordova-plugin-dialogs

Add the below script files:

  • jquery.mobile-1.4.0.css

  • jquery-1.10.2.min.js

  • cordova.js

    <!DOCTYPE html>
  <html>
  <head>
      <meta http-equiv="Content-type" name="viewport"
          content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no">

      <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
      <script src="cordova.js"></script>
      <script type="text/javascript" src="js/jquery-1.10.2.min.js">

</script>
      <script>
          $(document).ready(function () {
              document.addEventListener("deviceready", onDeviceReady, false);
              document.addEventListener("online", onOnline, false);
              document.addEventListener("offline", onOffline, false);
              function onDeviceReady() {
                  console.log(" ready");
              }

              function onOnline() {
                  console.log("connected");
              }

              function onOffline() {
                  debugger;
                  console.log("lost connection");

                  navigator.notification.alert(
                      'Please Check your internet connection.', // message
                      null, // callback
                      'Sample', // title
                      'OK' // buttonName
                  );
              }
          });
      </script>
  </head>
  <body>
      <p style="top:100px;"> Sample</p>
  </body>
  </html>

Output:

Screenshot of output

For more details, see https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information/index.html#network-related-events

Upvotes: 1

3iL
3iL

Reputation: 2176

You have to make sure that document has loaded before adding the above code. Do something like this in your HTML:

<body onload="onLoad">

and in your script/JS file do something like this:

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
   //call your internet connectivity code here...
}

Upvotes: 0

Related Questions