CODEWITHSUNDEEP
ionic2ionic-native
Lisa
Lisa

Reputation: 675

how to notify user about the state of network connectivity in ionic2

according to my application , I have to notify user whenever he gets disconnected from a network .so in a provider i used two function , one returns true on online state and the other returns true on offline state. In app.component.ts am checking whether app is in online state or not by calling "isOnline()" of the provider.here the provider code..

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Network } from '@ionic-native/network';
import { Platform } from 'ionic-angular';
import {Observable} from 'rxjs/Rx';
/*
  Generated class for the Connectivity provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
declare var Connection;
@Injectable()
export class Connectivity {
	onDevice: boolean;
	myObservable :any;
  constructor(public http: Http,public platform: Platform,public network:Network) {
    console.log('Hello Connectivity Provider');
    this.onDevice = this.platform.is('cordova');
    /*
    this.myObservable = Observable.create(observer => {
    	let result = this.isOffline();
    	observer.next(result);
	});
  */
 
  }
isOnline(): boolean {
	
    if(this.onDevice && this.network.type){
      return this.network.type !== Connection.NONE;
    } else {
      return navigator.onLine;
    }
    
    
  }
 
  isOffline(): boolean {
  
    if(this.onDevice && this.network.type){
      return this.network.type === Connection.NONE;
    } else {
      return !navigator.onLine;  
    }
    
  }

}

inside the constructor of app.component.ts am calling isOnline() 

constructor(platform: Platform,public connectivityService: Connectivity) {
  
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
      /*this.connectivityService.myObservable.subscribe((data) => {
        console.log(data);
        
      });*/
     if(this.connectivityService.isOnline()){
      console.log("online");
      
    }
    else {
      console.log("offline");
    }
           
    });

this is working fine but, when i get disconnected from network ,i have to refresh the browser again then only am able to see the "offline" on console.how to notify user as soon as network is lost

Upvotes: 0

Views: 931

Answers (3)

Jonas Tomanga
Jonas Tomanga

Reputation: 1108

I am getting this error this.network.onchange(...).subscribe is not a function and I am using ionic native 3.6.0. Looking at the Network native plugin this is how the code looks like. 

/**
 * Returns an observable to watch connection changes
 * @return {Observable<any>}
 */
Network.prototype.onchange = function () {
    return Observable.merge(this.onConnect(), this.onDisconnect());
};

Doing the same in your code can fix the issue 

import { Observable } from 'rxjs/Observable';

Observable.merge(this.network.onConnect(), this.network.onDisconnect()).subscribe(() => {
  this.getNetworkInfo();
});

Upvotes: 0

F.West
F.West

Reputation: 43

onchange() method isn't working correctly..

https://github.com/driftyco/ionic-native/issues/1043

I used the solution from the github forum:

Observable.merge(this.network.onConnect(), this.network.onDisconnect())
.subscribe(e => console.log(e), err => console.error(err));

Upvotes: 1

EyeOnicToo
EyeOnicToo

Reputation: 1

Have a look at the Ionic Native Network documentation.

Particularly the onChange() method:

onchange()
Returns an observable to watch connection changes

Returns: Observable<any>

Upvotes: 0

Related Questions