CODEWITHSUNDEEP
ionic3
Kapil Soni
Kapil Soni

Reputation: 1051

how can I push page only if internet connection is on in ionic3?

I really need your help, please. I'm trying to detect if there is internet connectivity on my Ionic 3 mobile app. It is working properly. but I have to click any link now this time the internet is off, now this case we have push page only if the internet is on.i don’t understand how to trigger onDisconnect function again?

//app.component.ts file
listenConnection(){
      // watch network for a disconnection if user is offline.......
      let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
        //show alert....
        const alert = this.alertCtrl.create({
          title: 'Your Data is off',
          message : 'Turn on data or wifi in setting',
          buttons: [
            {
              text: 'Ok',
              handler: (data: any) => {
               console.log('data');
             }}
          ],
          enableBackdropDismiss: false
        });
        alert.present();
      });
 
       // watch network for a connection
      let connectSubscription = this.network.onConnect().subscribe(() => {
           
          // 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.
          if (this.network.type === 'wifi') {
             console.log('data');
          }
      });
   }

It is working properly but the problem is that suppose I alert is open and we have close alert after click ok button. now I have to click any another link now the net is off we have push page only if the internet is on tell me, anyone, how to manage this scenario?

Upvotes: 0

Views: 288

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

So the way you normally want to do it in the app with a lot of pages:

  • create a "foundation" level provider - a global singleton provider that every page has to import.
  • in such provider you have your public var "appIsOnline".
  • such var is updated pro-grammatically based on subscription that you have
  • every page implements ionViewCanEnter guard that only allows the page to enter the stack if the foundation provider's var states the app is online.

Your provider should be something like this:

import { Injectable, AlertController } from '@angular/core';
import { Network } from "@ionic-native/network";

@Injectable()
export class FoundationProvider {

    public appIsOnline: boolean;
    private offlineAlert: any;

    constructor(
        private network: Network,
        private alertCtrl: AlertController
    ) {
        this.appIsOnline = true;
        this.offlineAlert = null;
        this.listenConnection();
    }

    listenConnection() {
        // watch network for a disconnection if user is offline.......
        let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
            this.appIsOnline = false;
            //show alert if it is not up:
            if (!this.offlineAlert) {
                this.offlineAlert = this.alertCtrl.create({
                    title: 'Your Data is off',
                    message: 'Turn on data or wifi in setting',
                    buttons: [
                      {
                        text: 'Ok',
                        handler: (data: any) => {
                            console.log('data');
                            this.offlineAlert = null;
                        }
                      }
                    ],
                    enableBackdropDismiss: false
                });
                alert.present();
            }
        });

        // watch network for a connection
        let connectSubscription = this.network.onConnect().subscribe(() => {
            this.appIsOnline = true;
            // 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.
            if (this.network.type === 'wifi') {
                console.log('data');
            }
        });
    }

}

Then each page needs to import this provider, inject it in the constructor and add the hook to the page:

ionViewCanEnter(): boolean {
   if(this.foundationProvider.appisOnline) {
      return true;
   }   
   return false;
}

Alternatively depending how exactly your app is structured you can "guard" .push, .setRoot etc methods you use to navigate to a page. But you shoudl share more of your code to give a better suggestion.

Upvotes: 2

Related Questions