ionic2: network connectivity check during splash screen

Question

I've been trying hard to figure out how to check for network connectivity while the splashscreen is being displayed.I've searched for the code in many places but most of those articles are outdated. I followed the tutorial that's mentioned here:https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

But then I found out that Network.connection is deprecated and has been replaced by Network.type on the ionic2 website. So I've replaced the word connection with Network.type everywhere. So I checked out the ionic2 website and found this code which I included in the home.ts file.

    import {Network} from 'ionic-native';
    checkConnection() {
    //console.log("entrou");
    //console.log(Network);
    let disconnectSubscription = Network.onDisconnect().subscribe(() => {
      console.log('network was disconnected :-( ')
    });
    disconnectSubscription.unsubscribe();
    console.log("watch network");
    console.log("Conexao" + Network.type);
    let connectSubscription = Network.onConnect().subscribe(() => {
      console.log('network connected!');
      setTimeout(() => {
        console.log('network status');
        console.log(Network.type); 
        if (Network.type === 'WIFI') {
          console.log('we got a wifi connection, woohoo!');
         }
      }, 3000);
    });
    console.log("Sub" + connectSubscription);
    connectSubscription.unsubscribe();
  }

here is my home.html file

`<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <button ion-buttton (click)="checkConnection()">Check Network</button>
</ion-content>`

I tried implementing the same code but doesn't work.

I want to know what is the exact code that I can use ?

What is that I need to import to use this code if it is the right one?

Also I want to know how to run it during the splashscreen ? On the console I found these errors

"Native: tried calling Network.type, but the Network plugin is not installed. Network plugin: 'ionic plugin add cordova-plugin-network-information'

But i've already installed the required plugin following that above command.I also installed "npm install ionic-native".

I reinstalled them on seeing this error but this still persists.

try `ionic plugin add cordova-plugin-network-information --save` — Suraj Rao, Mar 06 '17 at 12:49
Sorry it isn't working. I still get the same error. Kindly look at the code once.It's a request. — Impromptu_Coder, Mar 06 '17 at 12:55
No.I'm doing it on the emulator.Let me know if the code and its placement is correct ? — Impromptu_Coder, Mar 06 '17 at 13:16
I dont see any issue .. except maybe wrap it in `this.platform.ready().then(()=>{})` — Suraj Rao, Mar 06 '17 at 13:25
I request you to please look at this:http://stackoverflow.com/questions/42649745/ionic2-how-to-display-the-selected-result-in-the-search-bar-when-using-ion-sear — Impromptu_Coder, Mar 07 '17 at 13:36

score 1 · Answer 1 · answered Mar 08 '17 at 10:37

In your config.xml add the following:

<preference name="AutoHideSplashScreen" value="false" />

This will make the SplashScreen stay visible until you manually hide it.

Then in your app.component.ts do the following:

constructor(private platform: Platform) {

  platform.ready().then(() => {
    // Check the network stuff here and do what you need to do
    if (Network.type == 'WIFI') console.log('We are on WIFI!');
    else console.log('We aren't on WIFI');

    // then hide the splash screen manually
    SplashScreen.hide();
  });

}

score 0 · Answer 2 · edited May 23 '17 at 11:46

hi, make sure you have ionic-native to the latest version: https://github.com/driftyco/ionic-native/blob/master/CHANGELOG.md
please see this for implementation: https://forum.ionicframework.com/t/using-ionic-2-rc-4-native-network/75715/4
there is another problem associated with this , where on disconnect fires twice rather than only once: IONIC 2 native Network.onDisconnect() running code twice

I hope this helps.... besides there is no need to check during splashscreen.... make a provider for check network status, and then call your new provider/service in app.component.ts

Oh and dont pay attention to the message:Native: tried calling Network.type, but the Network plugin is not installed.

Just make sure you have added it correctly: ionic plugin add cordova-plugin-network-information --save

score 0 · Answer 3 · answered Aug 24 '17 at 13:18

reference from this - https://ionicframework.com/docs/native/network/

install : $ ionic cordova plugin add cordova-plugin-network-information
$ npm install --save @ionic-native/network

and put this code in app.component.ts

import { Network } from '@ionic-native/network';
 constructor(private network: Network) { }
   // watch network for a disconnect
    let disconnectSubscription = 
  this.network.onDisconnect().subscribe(() => {
   console.log('network was disconnected :-(');
 });

 // stop disconnect watch
 disconnectSubscription.unsubscribe();


  // watch network for a connection
  let connectSubscription = this.network.onConnect().subscribe(() => 
  {
   console.log('network connected!');
 // 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.
 setTimeout(() => {
 if (this.network.type === 'wifi') {
 console.log('we got a wifi connection, woohoo!');
   }
 }, 3000);
  });

  // stop connect watch
  connectSubscription.unsubscribe();

and add code in to app.module.ts

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

  ...

@NgModule({
 ...

 providers: [
  ...
   Network
   ...
  ]
  ...
   })
export class AppModule { }`

Hope this will helpful.

ionic2: network connectivity check during splash screen

3 Answers3

Linked