The connection plugin provides information about the connection type of the device. In order to use the connection plugin in our Apache Cordova project, we need to use the following cordova plugin add command:
> cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
In order to access the connection demo, you can click on the Connection list item. You will be introduced to the Connection page. You can click on the Get Connection Type button in order to know the current connection type of your device, as shown in the following screenshot:
Getting the device's connection type
The following code snippet shows the "connection" page:
<div data-role="page" id="connection">
<div data-role="header">
<h1>Connection</h1>
<a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
</div>
<div data-role="content">
<h1>Welcome to the Connection Gallery</h1>
<p>Click 'Get Connection Type' button below to know the connection type.</p>
<input type="button" id="getConnectionType" value="Get Connection Type"/><br/>
<div id="connectionType">
</div>
</div>
</div>As shown in the preceding "connection" page code snippet, it contains the following:
- A page header that includes a back button
- Page content that includes only one button,
"getConnectionType", and one div,"connectionType", to display the connection type
The following code snippet shows the page view controller JavaScript object that includes the action handlers of the page (connection.js):
(function() {
var connectionManager = ConnectionManager.getInstance();
$(document).on("pageinit", "#connection", function(e) {
e.preventDefault();
$("#getConnectionType").on("tap", function(e) {
e.preventDefault();
$("#connectionType").html("Current Connection: " + connectionManager.getCurrentConnection());
});
});
})();The "pageinit" event handler registers the "getConnectionType" tap event handler. In the "getConnectionType" tap event handler, it displays the current connection of the device, which is retrieved by calling the connectionManager.getCurrentConnection() method.
The following code snippet shows the connection manager JavaScript object that interacts with the Apache Cordova Connection API (ConnectionManager.js):
var ConnectionManager = (function () {
var instance;
function createObject() {
return {
getCurrentConnection: function () {
var connectionType = navigator.connection.type;
switch(connectionType) {
case Connection.UNKNOWN:
return "Unknown connection";
case Connection.ETHERNET:
return "Ethernet connection";
case Connection.WIFI:
return "WiFi connection";
case Connection.CELL_2G:
return "Cell 2G connection";
case Connection.CELL_3G:
return "Cell 3G connection";
case Connection.CELL_4G:
return "Cell 4G connection";
case Connection.CELL:
return "Cell generic connection";
case Connection.NONE:
return "No network connection";
default:
return "Un-recognized connection";
}
}
};
};
return {
getInstance: function () {
if (!instance) {
instance = createObject();
}
return instance;
}
};
})();As you can see, ConnectionManager is a singleton object that has a single method as highlighted in the code. The getCurrentConnection() method uses the Cordova navigator.connection.type property in order to get the currently active network connection (Ethernet, Wi-Fi, cell 2G, cell 3G, and so on).