How to check connections using cordova on XDK?

[Jonathan_S_]

The logic is: if the device have internet it welcomes with a alert, else if is not with the Internet, it replaces the elements of the main view by elements without information, so that the user hasn't to have navigation among the app. 
my purpose is to make the code work so that if the user has internet, he can view the alert welcome, otherwise, it displays the screen intended for users without connection.

so, this is my code:

 

	function net()
{

    var suaNet = navigator.connection.type;

     
    var status = {};

    status[Connection.NONE] = 'no access';

    status[Connection.UNKNOWN] = 'error: network not identified';

    status[Connection.WIFI] = 'wireless';

    status[Connection.CELL] = 'Cell net';

    status[Connection.UNDEFINED] = 'no definition';

     

            //alert('Note: ' + status[suaNet]);

     

    var resultado = "<p style='text-align:center'><img style='height:20em;width:20em;' src='img/icon-dove-1024x934.png'></p>" + "<h6 style='text-align:center;'>" + 'Sua rede: ' + status[suaNet] + "</h6>";

     

    var menuvazio = "<ul class='nav navbar-nav'><li style='texto-menu'><a href='#'>Sem conexão</a></li></ul>";

     

    var connectadoSim = {};

    connectadoSim = Connection.WIFI;

    connectadoSim = Connection.CELL;

     

    var naoConnectado = {};

    naoConnectado = Connection.UNDEFINED;

    naoConnectado = Connection.UNKNOWN;

    naoConnectado = Connection.NONE;

     

   

     

    if(Connection.NONE || Connection.UNKNOWN === false)

        {

            BootstrapDialog.alert("<h3 style='text-align:center;'>Olá</h3><h3 style='text-align:center;'>Seja bem-vindo!</h3><br><p>Selecione as programações no menu à direita.</p>");

        }

   else if(Connection.NONE || Connection.UNKNOWN === true)

        {

            document.getElementById('div-inteira').innerHTML = resultado;

            document.getElementById('menu-barra-hamburguer').innerHTML = menuvazio;

        }

     

    else{

        alert("no works");

    }

}

How I can fix the bug about redirecting elements about network status with cordova?

[Swati_S_Intel1 · Accepted solution]

You simply check the navigator.connection.type to check the network status. See the code below.

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

    if(networkState === Connection.NONE){
      alert("no network connection");
      // your code here for users without connection 
    }
    else {
       alert("Connection available :" + states[networkState]);
       // your code here for users with connection
    }

The UNKNOWN state is really for the emulator and browser where the actual connection type is not detected, on actual device the connection type is returned.  

Apart from the above code you have to check if the connection gets lost or comes back on while your app is running, using online and offline event listeners and callbacks. See code below.

document.addEventListener("online", onOnline, false);

function onOnline() {
    // Handle the online event
}

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // Handle the offline event
}

[Jonathan_S_]

thank you, problem solved.