Skip to main content

Check Internet Connection is Available in Ionic Application

The following Content will show you how to make use of social media sharing in your Android and Windows and iOS mobile application using Ionic Framework.
To implement this , we’ll be using the plugin cordova-plugin-network-information.

1.Create the project

ionic start Test blank
cd Test
ionic platform add android

2.Add Plugin
This plugin provides an implementation of an old version of the Network Information API. It provides information about the device's cellular and wifi connection, and whether the device has an internet connection.
This plugin not supported in browser for testing build in device.

   cordova plugin add cordova-plugin-network-information
Until Cordova 2.3.0, the Connection object was accessed via navigator.network.connection, after which it was changed to navigator.connection to match the W3C specification. It's still available at its original location, but is deprecated and will eventually be removed.
3.Implementation
In your index.html nothing to change for testing purpose you just need to add following code in your app.js to showing network connection problem.

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform, $ionicPopup) {
 $ionicPlatform.ready(function() {

   // Check for network connection
   if(window.Connection) {
     if(navigator.connection.type == Connection.NONE) {
       $ionicPopup.confirm({
         title: 'Network Problem',
         content: 'Sorry, Please Check Your Network Connection.'
       })
       .then(function(result) {
         if(!result) {
           navigator.app.exitApp();
         }
       });
     }
   }
 });
})

4.Build or Run It

ionic build android or

         ionic run android


NOTE:

Here , the connection object, exposed via navigator.connection, provides information about the device's cellular and wifi connection.
Available more constants with it as follows ,

  • Connection.UNKNOWN
  • Connection.ETHERNET
  • Connection.WIFI
  • Connection.CELL_2G
  • Connection.CELL_3G
  • Connection.CELL_4G
  • Connection.CELL
  • Connection.NONE

Simple example for connection.type


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.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';

   alert('Connection type: ' + states[networkState]);
}

Comments

  1. Dropped internet connection is really a big problem. A reliable connection is always needed. The internet service provider Reno should be careful about this and give support to clients.

    ReplyDelete

Post a Comment

Popular posts from this blog

File Upload & Download With ng-cordova File Transfer Plugin In Ionic Framework

Using the AngularJS extension set , ngCordova , with Ionic Framework and the Apache Cordova File Transfer plugin, you can easily upload files to a remote server and download files from a remote server. 1.Create the project ionic start Test blank cd Test ionic platform add android 2.Add Plugin org.apache.cordova.file-transfer https://github.com/apache/cordova-plugin-file-transfer This plugin allows you to upload and download files. This plugin defines global FileTransfer, FileUploadOptions Constructors. Although in the global scope, they are not available until after the deviceready event . Installation cordova plugin add cordova plugin add cordova-plugin-file-transfer     2.    org.apache.cordova.file             https://github.com/apache/cordova-plugin-file             This plugin implements a Fi...

What exactly means MVW design pattern ?

What is a MVW framework? The abbreviation stands for 'Model - View - Whatever'.  Well there are many different JavaScript frameworks available , all invented for the same purpose. They all try to separate the presentation logic from the business logic where JavaScript holds the model and logic, and html the presentation layer. Quick overview : You can change the model without changing the view and vice-versa Unit testing is easy These are the core benefits of using such a framework. By separating presentation and business logic changes to the code are easier to implement and take less time. Another benefit is that code can be reused from a controller thus saving more time. Angularjs makes the code also shorter in comparison to other frameworks, which improves code stability. Less code means minor potential for bugs. For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings...

MEAN Stack Development with Vagrant

MEAN Stack Development with Vagrant Introduction Vagrant provides easy to configure, reproducible, and portable work environments built on top of industry-standard technology and controlled by a single consistent workflow to help maximize the productivity and flexibility of you and your team. To achieve its magic, Vagrant stands on the shoulders of giants. Machines are provisioned on top of VirtualBox , VMware, AWS, or any other provider . Then, industry-standard provisioning tools such as shell scripts, Chef, or Puppet, can be used to automatically install and configure software on the machine. Setup Virtualbox            You have to completely remove older VirtualBox versions before               installing VirtualBox-5.0 ! Display Allready Installed Packages sudo dpkg -l | grep virtualbox Uninstall VirtualBox sudo ap...