CODEWITHSUNDEEP
angularionic3
Ismail S
Ismail S

Reputation: 144

Check internet connection when app starts in ionic

i am using Ionic 3, my problem is the app only checks the connection after it has changed only. But what i need is to also check the connection when my main page loads as this will trigger a change in the UI. Here is what i have gotten so fa:

constructor(public navCtrl: NavController,private changedetect:           ApplicationRef, private weatherProvider: WeatherProvider, private formBuilder: FormBuilder, private network: Network, public alertCtrl:   AlertController, private platform: Platform) {

let disconnectSubscription = this.network.onDisconnect().subscribe(()    => {
  console.log('network was disconnected :-(');
  this.netstatus = false;
  this.loginbtntxt ="OFLINE";
  setTimeout(() => {
    // if (this.network.type === 'wifi') {
    //   console.log('we got a wifi connection, woohoo!');
    // }
  }, 3000);
});

// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
console.log('network connected!');
this.netstatus = true;
this.loginbtntxt ="ONLINE";
// 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);
 });

this.login = this.formBuilder.group({
email: ['', Validators.required],
password: [''],
});
}

Upvotes: 0

Views: 3167

Answers (2)

Steven Scott
Steven Scott

Reputation: 11260

I have the following provider that I put together from various sources, including Josh Morony's Tutorials

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

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

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';

@Injectable()
export class NetworkConnectivityProvider {

    public NetworkStatus: BehaviorSubject<boolean>;
    private WatchConnect: Subscription;
    private WatchDisconnect: Subscription;

    constructor(public platform:Platform, public network: Network) {
        console.log('Hello NetworkConnectivityProvider');
        this.NetworkStatus = new BehaviorSubject(false);            // Assume Network is offline
        this.CheckNetworkStatus();
        this.CreateNetworkObserverSubscriptions();
    }

    CheckNetworkStatus() {
        if( this.platform.is('cordova') ) {
            if( this.network.type === undefined || this.network.type === null || this.network.type === 'unknown') {
                this.UpdateNetworkStatus(false);
            } else {
                this.UpdateNetworkStatus(true);
            }
        } else {
            this.UpdateNetworkStatus(navigator.onLine);
        }
    }

    CreateNetworkObserverSubscriptions() {
        this.WatchConnect = this.network.onConnect().subscribe(
            data => { this.UpdateNetworkStatus(true); },
            error => { console.log(error); }
        );      
        this.WatchDisconnect = this.network.onDisconnect().subscribe(
            data => { this.UpdateNetworkStatus(false); },
            error => { console.log(error); }
        );      
    }

    UpdateNetworkStatus(IsOnline:boolean) {
        console.log('Network ', (IsOnline == true ? 'Online' : 'Offline') );
        this.NetworkStatus.next(IsOnline);
    }
}

Upvotes: 0

Ismail S
Ismail S

Reputation: 144

in case someone is lost in this, i found the answer:

navigator.onLine

Upvotes: 1

Related Questions