ionic2 中的网络监测功能

参考：http://ionicframework.com/docs/v2/native/network/

（后须还将发表其他我正在ionic2使用的插件或功能）

增加网络监测功能的cordova插件：

$ ionic plugin add cordova-plugin-network-information
           

开启网络状态动态检测：

// 开启网络监测
  startNetDetect() {
    // watch network for a disconnect
    let disconnectSubscription = Network.onDisconnect().subscribe(() => {
      console.log('network was disconnected :-(');
    });

    // stop disconnect watch （停止断网检测）
    // disconnectSubscription.unsubscribe();

    // watch network for a connection
    let connectSubscription = Network.onConnect().subscribe(() => {
      console.log('network connected!');
      // 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.
      setTimeout(() => {
        this.showNetworkStatus();
      }, 3000);
    });

    // stop connect watch （停止联网检测）
    // connectSubscription.unsubscribe();
  }
           

为加入显示正在查看当前网络状态的效果，加入LoadingController，显示网络检测过程：

checkNetwork() {
    let loader = this.loadingCtrl.create({
      content: "网络监测中..."
    });
    loader.present();

    setTimeout(() => {
      loader.dismiss();
      this.showNetworkStatus();
    }, 3000);
  }
           

显示网络状态信息的方法：

showNetworkStatus() {
    if(Network.connection == 'unknown') {
      console.log('This is a unknown network!');
    } else if(Network.connection == 'none') {
      console.log('none network!');
    } else {
      console.log('we got a ' + Network.connection + ' connection, woohoo!');
    }
  }
           

程序如下：

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <h2>Welcome to Ionic!</h2>
  <button (click)="startNetDetect()">开启网络监测</button>
  <button (click)="checkNetwork()">当前网络状态</button>
</ion-content>
           

home.ts

import {Component} from '@angular/core';
import {NavController, LoadingController} from 'ionic-angular';
import {Network} from "ionic-native";

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController,
              private loadingCtrl: LoadingController) {

  }

  // 开启网络监测
  startNetDetect() {
    // watch network for a disconnect
    let disconnectSubscription = Network.onDisconnect().subscribe(() => {
      console.log('network was disconnected :-(');
    });

    // stop disconnect watch （停止断网检测）
    // disconnectSubscription.unsubscribe();

    // watch network for a connection
    let connectSubscription = Network.onConnect().subscribe(() => {
      console.log('network connected!');
      // 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.
      setTimeout(() => {
        this.showNetworkStatus();
      }, 3000);
    });

    // stop connect watch （停止联网检测）
    // connectSubscription.unsubscribe();
  }

  checkNetwork() {
    let loader = this.loadingCtrl.create({
      content: "网络监测中..."
    });
    loader.present();

    setTimeout(() => {
      loader.dismiss();
      this.showNetworkStatus();
    }, 3000);
  }

  showNetworkStatus() {
    if(Network.connection == 'unknown') {
      console.log('This is a unknown network!');
    } else if(Network.connection == 'none') {
      console.log('none network!');
    } else {
      console.log('we got a ' + Network.connection + ' connection, woohoo!');
    }
  }
}
           

Advanced

The 

connection

 property will return one of the following connection types: 

unknown

, 

ethernet

, 

wifi

, 

2g

, 

3g

, 

4g

, 

cellular

, 

none

Network.connection 的可能值为unknown、ethernet、wifi、2g、3g、4g、cellular、none。