Check Network Connection With IonicFramework
When creating a mobile app, specifically one that makes heavy use of the internet, it is often necessary to make sure an internet connection exists at launch and possibly display a message or perform an action if one does not exist.
The following is for an Ionic Framework 1 application. If you’re using Ionic 2, you will want to check here.
The following chunk of example code is typically found in your IonicFramework project’s js/app.js file. It demonstrates how to check if a network connection exists on application load and how to display an Ionic popup that is nicely styled in comparison to a JavaScript alert dialog.
app.jsJavaScript
var myApp = angular.module('myapp', ['ionic'])
.run(function($ionicPlatform, $ionicPopup) {
$ionicPlatform.ready(function() {
if(window.Connection) {
if(navigator.connection.type == Connection.NONE) {
$ionicPopup.confirm({
title: "Internet Disconnected",
content: "The internet is disconnected on your device."
})
.then(function(result) {
if(!result) {
ionic.Platform.exitApp();
}
});
}
}
});
});
In the above example, we first check if the Connection object exists in the window. When viewing your project from a web browser Connection doesn’t exist so calling Connection.NONE would only result in a JavaScript error.
The Cordova documentation gives us the following available options in addition to Connection.NONE
Value Description
Connection.UNKNOWN Unknown connection
Connection.ETHERNET Ethernet connection
Connection.WIFI WiFi connection
Connection.CELL_2G Cell 2G connection
Connection.CELL_3G Cell 3G connection
Connection.CELL_4G Cell 4G connection
Connection.NONE No network connection
This plugin can be added to your project with the following:
Add Apache Cordova Network Information PluginShell
cordova plugin add org.apache.cordova.network-information
The Ionic popup that shows upon no internet connection will have two buttons. If the negative or cancel button is pressed then the application will exit. No action has been specified for a positive or ok response. It is worth noting that a network connection check can only be done from the device, not a web browser.
0 comments