CODEWITHSUNDEEP
angularcordova-pluginsionic2
Victor Carvalho
Victor Carvalho

Reputation: 2020

Verify changes in internet connection ionic2

I see this tutorial to determine network availability in ionic2: https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

But my question is: there's a way to show the dialog "automatically" when the network status change (without using Observable.period())?

Thanks!

Upvotes: 2

Views: 3696

Answers (4)

user1960447
user1960447

Reputation: 1

checkNetwork() {
    this.platform.ready().then(() => {
        var networkState = navigator.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.CELL]     = 'Cell generic connection';
        states[Connection.NONE]     = 'No network connection';
        let alert = this.alertCtrl.create({
            title: "Connection Status",
            subTitle: states[networkState],
            buttons: ["OK"]
        });
       alert.present();
    });
}

Upvotes: -1

Oliver
Oliver

Reputation: 56

I like the Observable way in Angular2. But the events offline, online are in the window object not in the document.

Online_and_offline_events

Hope it helps ...

 console.log(navigator.onLine);

 let offline = Observable.fromEvent(window, 'offline');
 let online = Observable.fromEvent(window, 'online');

    offline.subscribe(() => {
        console.log(navigator.onLine);
    });

    online.subscribe(() => {
        console.log(navigator.onLine);
    });

Upvotes: 1

Andrei Drynov
Andrei Drynov

Reputation: 8592

I decided to go for Events (https://ionicframework.com/docs/v2/api/util/Events/) instead:

constructor(private events: Events, private alertCtrl: AlertController) {
    this.platform.ready().then(() => {
      this.watchForNetworkChanges();
});

watchForNetworkChanges() {
  // Watch network for a connection
  Network.onConnect().subscribe(() => {
    this.events.publish('network:connected', true);      
  });

  Network.onDisconnect().subscribe(() => {
   this.events.publish('network:connected', false);
});

And in any other place I subscribe to those events to deal with network state change:

 this.events.subscribe('network:connected', (status) => {
  let connected = status[0] === true;

  if (!connected) {
    let alert = this.alertCtrl.create({
      title: 'No Internet',
      message: "You are offline!"
      buttons: ['OK']
    });

    alert.present();
  }

  this.isConnected = connected;
}

Upvotes: 1

Kenneth Van den Berghe
Kenneth Van den Berghe

Reputation: 275

In the documentation of the Network Information plugin you can see that the plugin emits 2 events: "offline" if the device goes offline and "online" if the devices goes online. These two events we can use to make Observables. In this HomePage i make 2 observables and in the subscribe i make functions to show Alerts. First I need the Observable from rxjs and the method fromEvent needs to be imported as well.

import {Page, Alert, NavController} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

constructor(public nav:NavController) {
    var offline = Observable.fromEvent(document, "offline");
    var online = Observable.fromEvent(document, "online");

    offline.subscribe(() => {
        let alert = Alert.create({
            title: "Connection",
            message: "You are offline!"
        });
        nav.present(alert);
    });

    online.subscribe(()=>{
        let alert = Alert.create({
            title: "Connection",
            message: "You are online!"
        });
        nav.present(alert);
    });
  }
}

Upvotes: 1

Related Questions