check internet connection and show popup

Question

I am developing mobile application using jQuery Mobile and Phonegap (3.3), in this application I want to show website in iframe, so I need to check internet connection periodically and I also want a popup when there is no internet connection. in my application there is a image and I am using this images as a menu,some of the images link are connected to internet so I want whenever click on this images it check internet connection and if there is not internet connection the popup appears.

I tried this:

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

It check only the first time when the application launches. But I need to check it periodically

I tried this:

<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}

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

} 
// alert dialog dismissed
function alertDismissed() {
// do something
}
function checkReachability() {
var _check=true;

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: '+ networkState + states[networkState]);
if(networkState==="unknown"){
_check=false;
showAlert();
return _check;
}
else {
return true;
}
}
function showAlert() {
navigator.notification.alert("Please connect your device to Internet.",onDeviceReady,"No Network        Connectivity","OK");
}
</script>
<img src="sample.png" id="img1" data-linkurl="#page2" onClick="checkReachability()">

I tried this:

<script>
document.addEventListener("offline", function() {
alert("No internet connection");
}, false);
</script>

I tried this:

 document.addEventListener("offline", onOffline, false);
 document.addEventListener("online", onOnline, false);
 function onOnline() {
 $.mobile.back();
}
//
function onOffline() {
$.mobile.changePage( "offline.html");
}

I tried this also:

function onDeviceReady(){
try{
    var networkState = navigator.connection && navigator.connection.type;

    setTimeout(function(){
        networkState = navigator.connection && 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.NONE]     = 'No network connection';

        alert('Connection type: ' + states[networkState]);
    }, 500);
    }catch(e){
    alert(e);
    $.each(navigator, function(key, value){
        alert(key+' => '+value);
    });
   }
}

config.xml: <gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />

<gap:config-file platform="android" parent="/manifest">
    <uses-permission name="android.permission.ACCESS_NETWORK_STATE" />
</gap:config-file>

<gap:config-file platform="android" parent="/manifest">
    <uses-permission name="android.permission.INTERNET" />
</gap:config-file>  

<gap:config-file platform="android" parent="/manifest">
    <uses-permission name="android.permission.READ_PHONE_STATE" />
</gap:config-file>

<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager" />
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/> 

androidmainfest.xml

 <uses-permission android:name="android.permission.INTERNET" />   
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Answer 1

Simplest Network Status WEB Solution

Web API -> Navigator -> Online and offline events

1. Get to know when the user is offline, so that you can queue your server requests for a later time.

2. know when the user comes back online, so that you can re-synchronize with the server.

window.addEventListener('load', () => {
  const status = document.getElementById("status");
  const log = document.getElementById("log");

  function updateOnlineStatus({type}) {
    const condition = navigator.onLine ? "? You're Back online ?" : "? Sorry, You're offline ?";

    status.className = condition;
    status.innerHTML = condition;

    log.insertAdjacentHTML("beforeend", `$ Event -> ${type}; Status MSG: ${condition}`);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

Testing

1. Open the Dev-tools Console
2. Go to Network > Network Throttling
3. Change to Offline

4. Change back to No Throttling

window.addEventListener('load', () => {
  const status = document.getElementById("status");
  const log = document.getElementById("log");

  function updateOnlineStatus({type}) {
    const condition = navigator.onLine ? "? You're Back online ?" : "? Sorry, You're offline ?";

    status.className = condition;
    status.innerHTML = condition;

    log.insertAdjacentHTML("beforeend", `$ Event -> ${type}; Status MSG: ${condition}`);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

body {
  background: #010025;
}

p {
  color: white;
  font-size: 24px;
  padding: 5%;
  text-align: center;
}

#status {
  position: fixed;
  width: 100%;
  color: #FFF;
  padding: 0.5em 0;
  border-radius: 5px;
  text-align: center;
  font: bold 1em sans-serif;
  text-transform: uppercase;
  box-shadow: 5px 5px 10px black;
}

#log {
  padding: 2% 5%;
  font: 0.8em sans-serif;
  color: greenyellow;
  background: #020018;
  border-radius: 15px;
  border: 2px double;
}

.online {
  background: green;
}

.offline {
  background: red;
}

<div id="status"></div>
<p>This is an Online and offline events test ?</p>
<div id="log"></div>

Keep Up Coding! ??

Answer 2

Since you didn't mention it, make sure you have the network information plugin installed: https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md

cordova plugin add org.apache.cordova.network-information