In this tutorial, you will learn, how to use the ionic 2 network information plugin. This plugin is used to check, whether the application is connected to the network or disconnected from the network. This task is done by network plugin automatically. 

Disconnected from the Network

 

Connected to the Network

 

Install the network plugin using the below command in the root of ionic 2 project directory.

ionic plugin add cordova-plugin-network-information

You can also install the same plugin using the npm

npm install --save @ionic-native/network

Import the Network class to app.module.ts 

import { Network } from '@ionic-native/network';

And include it in the provider of the ngModule

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Network]

The inclusion of class file to app.module.ts is required for the Ionic Native 3.x plugins.

The network class had tow functions to watch the connect and disconnect. They are

1. onDisconnect()

This function will be called, whenever you are disconnected from the network. 

2. onConnect()

This function will be called, whenever you are connected to the network. 

In this example, the connect and disconnect can be showed using the AlertControllor. So import Network and AlertController classes

import { Network } from '@ionic-native/network';
import { AlertController } from 'ionic-angular';

Create a reference variable in the constructor using 

constructor(private network: Network,public alertCtrl: AlertController) 
{

}

Paste the below code inside the constructor.

let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  console.log('network was disconnected :-(');
  let alert = this.alertCtrl.create({
      title: 'Network was disconnected :-(',
      subTitle: 'Please check your connection. And try again',
      buttons: ['OK']
    });
    alert.present();
});


// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');

  let alert = this.alertCtrl.create({
      title: 'Network connected!',
      subTitle: 'Hurrah!',
      buttons: ['OK']
    });
    alert.present();
  // We just got a connection but we need to wait briefly
   // before we determine the connection type.  Might need to wait

  // prior to doing any api requests as well.

});

The above code will watch the connect and disconnect automatically. And will give us the alert using the AlertController.

 

Full Code:

export class HomePage {

  constructor(private network: Network,public alertCtrl: AlertController) { 


    //network

let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  console.log('network was disconnected :-(');
  let alert = this.alertCtrl.create({
      title: 'Network was disconnected :-(',
      subTitle: 'Please check your connection. And try again',
      buttons: ['OK']
    });
    alert.present();
});


// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');

  let alert = this.alertCtrl.create({
      title: 'Network connected!',
      subTitle: 'Hurrah!',
      buttons: ['OK']
    });
    alert.present();
  // We just got a connection but we need to wait briefly
   // before we determine the connection type.  Might need to wait

  // prior to doing any api requests as well.

});
}
}

Supported platforms

  • Amazon Fire OS
  • iOS
  • Android
  • BlackBerry 10
  • Windows Phone 7
  • Windows Phone 8
  • Windows
  • Firefox OS
  • Browser