Ionic: How to detect connected to internet with no access

Ionic Framework ionic-v3
1

Hi,
I am developing an app and i just want to check network connectivity.but it only detects that device is connected to internet or not.it should also detect if there no internet access.

Code :
1-my provider

export class ConnectivityService {

  onDevice: boolean;

  constructor(public platform: Platform, public alertCtrl: AlertController) {
    this.onDevice = this.platform.is('cordova');
  }

  isOnline(): boolean {
    if (this.onDevice && Network.type) {
      return Network.type !== Connection.NONE;
    } else {
      return navigator.onLine;
    }
  }

  isOffline(): boolean {
    if (this.onDevice && Network.type) {
      return Network.type === Connection.NONE;
    } else {
      return !navigator.onLine;
    }
  }

}

2-component

export class Demo {
private internetStatus: boolean = false;
  constructor(public connectivityService: ConnectivityService) {

    this.checkInternetConnection();
  }
  checkInternetConnection() {
    this.addConnectivityListeners();
    if (this.connectivityService.isOffline()) {
      this.internetStatus = true;
    } 
  }
  addConnectivityListeners() {
    let onOnline = () => {
      this.internetStatus = false;
    };
    let onOffline = () => {
      this.internetStatus = true;
    };
    document.addEventListener('online', onOnline, false);
    document.addEventListener('offline', onOffline, false);
  }  
}

Ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.5.0
Xcode version: Not installed

1 Like
2

What is the difference between these two things?

3

Device is just connected to internet but there no access due to some technical problem.

4

I’m sorry, but I can’t make any sense out of this. The internet isn’t a concrete thing. If you are interested in knowing whether your device can connect to a particular host, try connecting to it. If it works, it works. If it didn’t, it didn’t.

1 Like
5

In my application before displaying data to user.i need to check that device is connected to network or not.

Note-sometime it happens that we are connected to the network but if you try to search something on browser it says “Something went wrong please check you connection and try again”.
Maybe your ISP deactivate you account,therefore you can’t browse anything .Again keep in you are connected to network using (wifi router,lan cable,etc)

Scenario:
Let device is connected to network,But it can’t access/browse anything.
So,it should give me alert "Please check your internet connection ".
But it not displays any alert in this case.

6

That’s your solution. The error message in browser only appears after trying to connect to a website and failing. Without doing that, your app can’t know that it does have a network connection, but it is broken.

1 Like
7

The only solution which comes to my mind is to have a really dummy backend function in your API, that return true just for calling it.

So you check if your mobile have internet connection via the Network provider, then if success, call your dummy API service (the most simplest call you can make, a GET API call to http://yourdomain.com/checkconnection for example) and if this call is success, then your device is really connect to internet.

2 Likes
8

The correct way to do this is to use Ionic Native Plugin:

9

Have you got any better solution ??

10

but it is not working when the device is already connected or not.

It gives network only on events such as onConnect, onDisconnect, onChange
but need a way to find whether the device is already connected or not.

Any correct way to know the device has internet connection or not ???

11

Have you got any better solution???

12

this way working for me

isOnline(): boolean {
return navigator.onLine;
}

isOffline(): boolean {
return !navigator.onLine;
}

1 Like
13

Working for me. Thanks

14

Hello everybody

I have the same question but i think this need a detalled explication case.
For example: if you have your phone with DATA (When i say data, mean the service that your phone have to access to the internet: LTE, 3G 2G…).

Then, suppose your phone exceed the capacity of DATA that the company gave to you to navegate in the internet. Your phone understand he is still connected to the network but you can’t navigate.

Is the same to say: “You are connected to your house’s wifi but your wireless router isn´t connected to the Internet”

And Question is: “How you detect the phone is connected but not have DATA to navigate on the Internet”.

thanks

15

At the risk of repeating myself from earlier in the thread, both the easiest thing to implement and what I think makes most sense for these scenarios (including yours) is to try to make a network request to (for example) a simple heartbeat endpoint on a known server. If that request fails, you can probably expect that further ones would as well.

If your question is about phrasing of the error reporting to the user, I don’t know of any programmatic way to distinguish between “no network connection at all”, “connected to something but that ‘something’ can’t reach the internet” and “billing layer problem unrelated to physical network”, but perhaps something like “unable to reach necessary network resources” would make sense to the user, and if needed you could list a few possible troubleshooting suggestions including the data cap hit you seem to be concerned about.

16

Actually, that’s the option i going to implement. By as you say, i don’t know how much stressfull could be this proccess for the phone. But i’ll try it and if everything it’s ok, i will tell you.

Thanks

17

Hi everybody

I implemented the code and work really fine. Just i had to add some extra validation.
The resolution was add HEAD Protocol as control validater before any request you going to make in your application.
Add the beginning if you have “TRUE connection”, the HEAD Protocol will returns you a response. But, if you dont have “TRUE connection”, the HEAD Protocol don’t going to return response. With that behavior, you can make validation of your application connection.

Thanks

18

Hi sir, I’m new to ionic. May i get the code or hint to implement.

19

This is the fragmento to test you network on runtime

this.users.SpeedNetwork().subscribe(
          result => {
            console.log("Online");          
          },
          error => {
            console.log("Offline");
          }
        )

And this for make the request verification

 return this.http.head(this.connection).pipe(
      map((result: any) => result,
          (error: any) => error)
    )
20

can any one please help me good solution ??