Online/Offline Connection Redirect PhoneGap/Cardova?

Question

I'm developing an app using PhoneGap/Cordova 3.3.x and I'm not having any luck with a script that can check if a connection is available, and if so display the "main.html". If no connection, display "offline.html". Right now my index.html currently redirects to my "main.html" and I have this script in the "index.html" although its not working..I've tried several other scripts to no avail. Let me know if I need to have an appropriate .js file also, I am aware with older phonegap builds you used to have to contain a phonegap.js file in the assets?.. Any help? ::

<script>
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.NONE]     = 'No network connection';
}
  if (networkState == Connection.NONE ){
   window.location = "offline.html";
   } 
            }
        }

 window.location='./main.html';
</script>

I've also tried "./offline" which only gave me the default android page is not available. Thanks ahead of time!

Answer 1

You can subscribe to two events in your onLoad (same place as your deviceready).

The two events are "online" and "offline":

document.addEventListener("offline", this.onReceivedOffline, false);
document.addEventListener("online", this.onReceivedOnline, false);

So it will be

document.addEventListener("offline", onOffline, false);
function onOffline()
{
    window.location = "offline.html";
}

You can read more about it here: http://docs.phonegap.com/en/3.3.0/cordova_events_events.md.html#online