CODEWITHSUNDEEP
javascriptcordovajquery-mobile
zevio rodrigues
zevio rodrigues

Reputation: 233

How to check internet connection in Phonegap periodically?

I am working with Phonegap. I need to check the network connection periodically. Actually I am getting some data from a server. If there is no connection, I need to show an error alert.

I googled it and found the solution. But it is not ok. Because I need to check the connection periodically.

<html>
  <head>
    <title>navigator.network.connection.type Example</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for PhoneGap to load
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        checkConnection();
    }

    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]);
    }
    </script>
  </head>
  <body>
    <p>A dialog box will report the network state.</p>
  </body>
</html>

It check only the first time when the application launches. But I need to check it periodically, because I am doing socket programming. If there is a problem with internet, I need to show it. But this code only shows at launch time.

Upvotes: 15

Views: 31966

Answers (4)

Ramprasath Selvam
Ramprasath Selvam

Reputation: 4466

Try this code,

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

        function onDeviceReady() {
            //onDeviceReaddy
        }

        function onOnline() {
            //onOnline
        }

        function onOffline() {
            navigator.notification.alert(
                'Please Check your internet connection.', // message
                null, // callback
                'AllCare Doctor', // title
                'OK' // buttonName
            );
        }

 </script>

For More Details Click Here..!

Upvotes: 0

Matty J
Matty J

Reputation: 3156

Perhaps you could use the 'online' and 'offline' event listeners on the document to notify your App when it becomes online or offline, as described in the docs eg. here: http://docs.phonegap.com/en/3.2.0/cordova_events_events.md.html#online

Upvotes: 6

christianmenkens
christianmenkens

Reputation: 790

Unfortunately the answer is not stable on Chrome and Safari as well as several mobile browsers. It does not give you the "real Internet connection" state but rather the "network connection state". See:

https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.onLine

"In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. To learn more, see the HTML5 Rocks article, Working Off the Grid."

See this HTML5 Rocks article for a true stable solution - more work of course:

http://www.html5rocks.com/en/mobile/workingoffthegrid/

Upvotes: 4

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/d5XYR/

Use interval timer to check internet connection every predefined time. This solution requires HTML5 browser but this is not a problem because jQuery Mobile already requires HTML5 browser. In this case timer will check internet connection every 100 ms and set final result into a javascript global variable.

Everything depends on this line:

window.navigator.onLine -- it will be false if the user is offline.

Final solution:

var connectionStatus = false;

$(document).on('pagebeforeshow', '#index', function () {
    setInterval(function () {
        connectionStatus = navigator.onLine ? 'online' : 'offline';
    }, 100);
    $(document).on('click', '#check-connection', function () {
        alert(connectionStatus);
    });
});

Tested on:

  • Windows Firefox

  • Windows Google Chrome

  • Windows IE9 and IE10

  • Android 4.1.1 Chrome

  • iPad 3 Safari

  • iPad3 Chrome

Upvotes: 26

Related Questions