internet checking message
Tech

Internet Checking in Ionic 2/3

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

 

 

 

 

Comments

java
12 May 2018 at 14:20

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



Masuda
15 May 2018 at 15:52

This weblog genuinely is excellent. How was it created ?



Philippines
10 August 2018 at 05:39

That is great thank you so much



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

Your email address will not be published.

Ionic 2/3 open a new project

13 December 2017

Ionic 2/3 X-SocialSharing

28 December 2017