How to throw an error message when there's no network?

Ionic Framework ionic-v3
1

Hello guys,

How can I throw an error message when there’s no network connection?
I checked documentation of Network plugin but I couldn’t get it to work properly…
I’m trying to use AlertController to display an error message.
and the network should be checked in IonDidViewLoad().
Any code example would be appreciated!

Thanks,

2

I’ve created a provider named NetworkServiceProvider. Should work (in a device!) out of the box…

import { Injectable } from "@angular/core";
import { Network } from "@ionic-native/network";
import { Platform } from "ionic-angular";
import { BehaviorSubject } from "rxjs/Rx";

import { Toast, ToastController } from "ionic-angular";

@Injectable()
export class NetworkServiceProvider {
  public connected: BehaviorSubject<boolean> = new BehaviorSubject(true);
  private connectionToast: Toast;
  private subscribedToNetworkStatus: boolean = false;

  constructor(private network: Network, private toastCtrl: ToastController, private platform: Platform) {
  }

  public setSubscriptions() {
    if (!this.subscribedToNetworkStatus && this.platform.is("cordova")) {
      this.subscribedToNetworkStatus = true;

      if ("none" === this.network.type) {
        this.showAlert();
      }

      this.network.onConnect().subscribe((val) => {
        this.connected.next(true);
        this.connectionToast.dismiss();
        // console.log("Network onConnect", val);
      });
      this.network.onchange().subscribe((val) => {
        // console.log("Network onchange", val);
      });
      this.network.onDisconnect().subscribe((val) => {
        this.connected.next(false);
        this.showAlert();
      });
    }
  }

  private showAlert() {
    this.connectionToast = this.toastCtrl.create({
      cssClass: "error",
      dismissOnPageChange: false,
      message: "You aren't connected to the internet",
      position: "bottom",
      showCloseButton: false,
    });
    this.connectionToast.present();
  }
}
1 Like
3

(My) corresponding cssClass:

.error {
  text-align: center;

  .toast-wrapper{ 
     background: darken(#ed4039, 25%);
  }
}
1 Like
4

Thanks a lot! I will try this now. I followed other examples and nothing worked out.

5

You’re welcome. Don’t forget to initialize the subscriptions (in your app.component.ts e.g.)

...
import { NetworkServiceProvider } from "../providers/network-service/network-service";
...
export class MyApp {
  ...
  constructor( private netService: NetworkServiceProvider ) {
    ...
    this.platform.ready().then((readySource) => {
      ...
      this.netService.setSubscriptions();
      ...
    });
    ...
  }
}

Btw. You could initialize your subscriptions in the network service constructor, but I’ve choosen to initialize them myself calling the “setSubscriptions()” function when “platform.ready()”.

1 Like
6

After reading my post again, I noticed that one could call the “setSubscriptions()” function multiple times. I’ve added a “subscribedToNetworkStatus” boolean to the original answer. When set to true, this will prevent a user initiating multiple subscriptions when calling the function multiple times.

  private subscribedToNetworkStatus: boolean = false;
  ...
    // update in setSubscriptions() 
    if (!this.subscribedToNetworkStatus && this.platform.is("cordova")) {
      this.subscribedToNetworkStatus = true;
    }
1 Like
7

Thanks a lot. I will try them all now.
I think it’s best to use AlertController than toast.

Yes, network detection should happen only once when a user visits a page which requires wi-fi connection.