CODEWITHSUNDEEP
javascripttypescriptionic2
me9867
me9867

Reputation: 1599

No connection popup in Ionic 2

I have a "network check" that runs when you click on the Check Connection button and I need it to run when the app loads. I have had a go with popping it in a function with no sucess. Can anyone spot the function syntax error in my if states == ...?

Check connection by clicking Check Connection

    import {Component} from '@angular/core';
    import {NavController, Platform, AlertController} from 'ionic-angular';

    declare var navigator: any;
    declare var Connection: any;

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {

        constructor(public navCtrl: NavController, public platform: Platform, public alertCtrl: AlertController) { }

        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';

                // this. was missing
                let alert = this.alertCtrl.create({
                    title: "Connection Status",
                    subTitle: states[networkState],
                    buttons: ["OK"]
                });

                // This is the proper way to present the alert
                alert.present();
            });
        }

    }

Display Prompt If No Connection

    import {Component} from '@angular/core';
    import {NavController, Platform, AlertController} from 'ionic-angular';

    declare var navigator: any;
    declare var Connection: any;

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {

        constructor(public navCtrl: NavController, public platform: Platform, public alertCtrl: AlertController) { }

       ionViewDidLoad() {
            this.platform.ready().then(() => {
                var networkState = navigator.connection.type;
                var states = {};
                states[Connection.NONE]     = 'No network connection';

                if (states == states[Connection.NONE]) {

                let alert = this.alertCtrl.create({
                    title: "Connection Status",
                    subTitle: states[networkState],
                    buttons: ["OK"]
                });

                alert.present();

                }

            });
        }

    }

Upvotes: 0

Views: 310

Answers (1)

user1752532
user1752532

Reputation:

Navigator.connection is still in an experimental phase. It is not supported on the desktop so you are not going to get anything useful in testing on your browser. You have not mentioned if you are testing on your browser or through to your device, but maybe something to keep in mind. Your code might be fine.

See here: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection

navigator.connection.type will return one the following

bluetooth
cellular
ethernet
none
wifi
wimax
other
mixed

If you set your conditional to test again none, i don't see why it will not work.

...
   navigator.connection.type === 'none' ? this.isOffline() : console.log('online');
}

isOffline(){
   return this.alertCtrl.create({
              title: 'Connection Status',
              subTitle: 'No network connection',
              buttons: ["OK"]
           }).present();
 }

Upvotes: 1

Related Questions