Tech

Internet Checking in Ionic 2/3

16 December 2017
internet checking message

Hello today we will do the Internet Checking in practice at Ionic and we will see what else we can add in the future.

 

1.Why we should use Internet Checking ?

First, let’s see why this plugin is necessary.

  • If the application is running internet connected, you need to show it to the user when the connection is gone or not at all.
  • If you enter any  action when you are connected or not the internet connection, you need to control it.
  • The Internet Checking  can be used to determine the type (WiFi or roaming).

2.Setup

 

First, I will assume that we have opened a new application. If you do not know how to open a new application, click here to learn the necessary steps.

After  Npm install and ionic serve , we can go into loading the plugin.

Firstly;

 

ionic cordova plugin add cordova-plugin-network-information

 

we are adding plugin by typing this.

Then for npm;

 

npm install –save @ionic-native/network

 

3.Initialize and Creating

 

You can use it in many places for its use, but I will only use it for internet control.

After doing the main operations(2.),

app> app.component.ts file.

That’s why I do not want to control my application the first time it’s opened.

We first add this plugin to the top of the imports section.

import { Network } from ‘@ionic-native/network’

then I need to initialize it in the constructor and create it. For this;

public network: Network

I create it. Now I can use it like I want.

 

4.Using

 

You can also make use of this page by looking at the page. I will use it as follows;

 

network.onDisconnect().subscribe(() => {
let alert = this.alertCtrl.create({
title: “Connection Failed !”,
subTitle: “There may be a problem in your internet connection. Please try again ! “,
buttons: [{

text: (“Okay”)
}]
});
alert.present();
});
network.onConnect().subscribe(() => {

});

Lets explain.

 

  • network.onDisconnect().subscribe  :  This code allows you to do the work if there is no internet connection, for example I just clicked on an alert and showed a message “No Internet connection”. You can open this link if you want to, or you can use it just by showing a message.
  • network.onConnect().subscribe :  This code allows you to see what works if there is an internet connection. I also showed you a message like “I have an Internet connection” in order to be an example again, you can use it the way you want.

 

5.Results

 

Another process here ;

 

internet type

internet type

 

In this way you can also detect the connection type and perform the necessary operations. I can share the usage if requested.

As a result, with this plugin you can take care of all your work with internet connection, you can see visual results by browsing the screenshots below.

Take Care yourself …

 

internet checking message

internet checking message

 

internet checking code

internet checking code

 

 

 

 

You Might Also Like

8 Comments

  • Reply java 12 May 2018 at 14:20

    I believe this internet internet site contains really superb composed articles posts .

  • Reply Masuda 15 May 2018 at 15:52

    This weblog genuinely is excellent. How was it created ?

  • Reply Philippines 10 August 2018 at 05:39

    That is great thank you so much

  • Reply Henstrom 21 October 2018 at 10:07

    I’m typically to running a blog and i actually recognize your content. The article has really peaks my interest. I’m going to bookmark your site and keep checking for brand spanking new information.

  • Leave a Reply

    Emre Akbaki