CODEWITHSUNDEEP
ionic-frameworkionic3
Prashant
Prashant

Reputation: 1385

Ionic 3, how to check network connectivity in each page change?

I am searching for a better solution to popup dialog with connection fail, if internet is off at any position of my app.

I have provider to check the connection. But I am not getting good solution to call on each event or on each page change.

Upvotes: 2

Views: 15733

Answers (4)

Sunday Ømwami
Sunday Ømwami

Reputation: 71

i followed @HamidAraghi example and added to the ngOnit the navigator.OnLine provided in angular to set the networkStatus boolean when the app is started...hope it helps

 networkStatus:boolean; 
 connectSubscription$: Subscription = null;
 disconnectSubscription$: Subscription = null;

constructor(
    public navctrl: NavController,
    private afdb: AngularFireDatabase,
    public plt: Platform,
    public afAuth: AngularFireAuth,
    public route: Router,
    private alertCtrl: AlertController,
    private networkService: NetworkStateService,
    private network: Network,
    public ngZone: NgZone
  ) {
    // check internet connection
    // watch network for a disconnection
    this.disconnectSubscription$ = this.network.onDisconnect().subscribe(() => {
      this.ngZone.run(() => {
        this.networkStatus = false;
      });

      this.networkService.presentToast(`You're offline! 😢 `);
    });

    // watch network for a connection
    this.connectSubscription$ = this.network.onConnect().subscribe(() => {
      this.networkService.presentToast(`You're online! 😄 `);
      this.ngZone.run(() => {
        setTimeout(() => {
          if (this.network.type !== "none") {
            this.networkService.presentToast(
              `You got! 😄 ${this.network.type}`
            );
            this.networkStatus = true;

          }
        }, 1500);
      });

    });

  }

  ngOnInit() {
    // if we have internet connections
    if (navigator.onLine) {
      this.networkStatus = true;
      this.getAlarm();

    } else {
      this.networkStatus = false ;
    }

  }

Upvotes: 0

Aman Singh
Aman Singh

Reputation: 39

There is no full proof solution to this problem. It only works if the network status changes while app is running. What if the app is started while already the network is disconnected. It doesn't change the value this.disconnec

Upvotes: 3

Hamid Araghi
Hamid Araghi

Reputation: 454

Do this on app.component.ts:

import { Network } from '@ionic-native/network';
...
export class MyApp {
disconnect: boolean;
...
constructor(Network: Network,ngZone: NgZone,...){

            Network.onDisconnect().subscribe(() => {
            // You can do everything you want here on disconnected situation.
            // for example using NgZone.run() for executing work inside or 
            //outside of the Angular zone to optimize performance

                ngZone.run(() => { this.disconnect = true; });
            });
            Network.onConnect().subscribe(() => {
             // You can do everything you want here on connected situation.
                ngZone.run(() => { this.disconnect = false; });
            });
   }
}

Upvotes: 0

mduraes1994
mduraes1994

Reputation: 160

you can do it subscribing to an event.

I'll suggest you to do the following;

AppComponent.ts

export class MyApp {
  constructor (
    private network: Network,
    private platform: Platform,
    private alertCtrl: AlertController,
  ) {
    platform.ready().then(() => {
      this.listenConnection();
    })
  }

  private listenConnection(): void {
    this.network.onDisconnect()
      .subscribe(() => {
        this.showAlert();
      });
  }

  private showAlert(): void {
    // omitted;
  }
}

This way, you're going to listen the disconnect event in all application. Of course, you can isolate this code in a Provider, and call after the user logged in or some other business rule.

I hope it may help you.

Upvotes: 9

Related Questions