Check Phonegap app connection

Question

I'm doing an non-native app in Phonegap and I want to know when I have connection or not. Searching on the WEB, I found a way of how to know if I get a connection in my app, but I implemented in my code and doesn't worked.

The way I found was this:

document.addEventListener("deviceready", onDeviceReady, false);  

        // PhoneGap is loaded and it is now safe to make calls PhoneGap methods  
        function onDeviceReady() {  
            check_my_Connection();  
        }  

        function check_my_Connection() {  
            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]);  
        }  

And I call the function onDeviceReady() in the ready function of my script like this:

<script type="text/javascript">

     $(document).ready(function(){
          /*other code*/
          onDeviceReady();
         /*other chode*/
     });

     /*other code functions*/
     /*Before the rest of the code, I added the snippet code above of this*/

     document.addEventListener("deviceready", onDeviceReady, false); 
     ...
</script>

I read that I need a cordova.js, but the PhoneGap Desktop App (beta version) doesn't created it. This JS file is required to do this work? Exist another way to detect the connection in the Phonegap apps, without using jQueryUI or jQueryMobile? I need to do some change (s) in some file (s) of my project?

I'll appreciate any help or any way to do this.

P. S.: excuse me for my english.

Answer 1

The problem has to be inside your code. Just do the following to receive the connection state:

1. Open up your terminal/console
2. cordova create networkInformation com.example.com networkInformation
3. cd networkInformation
4. cordova platform add android
5. cordova plugin add cordova-plugin-network-information
6. cordova build

After you finished this process, you open up the created folder on your desktop. Move inside the www folder inside the platform -> android folder under assets. Open your index.js which should look like this:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }

};

app.initialize();

So now look for

onDeviceReady: function() {
    app.receivedEvent('deviceready');
},

And change it to this:

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    checkConnection();
},

Also add

function checkConnection() {
    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]);
}

directly above app.initialize();

This should be your full index.js then. Just launch your application and it'll alert you your network state:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        checkConnection();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }

};

function checkConnection() {
    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]);
}


app.initialize();