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。