需要聯網的app一般都需要進行網路監測，尤其是在app啟動時，若未發現網路連線應給出提示，本文在參照官網的基礎上實現了app啟動進行網路監測，實現該功能其實非常簡單，只需用到cordova的一個外掛——cordova-plugin-network-information，實現網路監測的核心就在於“this.network.type”，type型別有：，因此通過判斷type的型別即可檢測網路（官網給出了動態檢測網路和手動檢測網路的方法），過程如下。

第一步——下載外掛

cd到ionic專案檔案，執行如下命令

ionic cordova plugin add cordova-plugin-network-information
 

npm/cnpm install --save @ionic-native/network

第二步——注入依賴（初學者很多會忘了這一步）

第三步——在app.component.ts中實現app啟動時網路監測

完成程式碼如下（直接copy即可用）

import { Component } from '@angular/core';
import { Platform, LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from 
 
'@ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
import {Network} from "@ionic-native/network";
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;
constructor(platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen,
private 
 
network: Network,
private loadingCtrl: LoadingController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
this.checkNetwork();  //寫入函式，讓app啟動後進行網路監測
});
}
 //檢測網路，若未連線網路，給出提示
  checkNetwork() {
    if(this.network.type === 'unknown') {
      console.log('This is a unknown network, please be careful!');
} else if(this.network.type === 'none') {
      console.log('none network!');
let loader = this.loadingCtrl.create({
        content: "當前網路不可用，請檢查網路設定！"
});
loader.present();
} else {
      console.log('we got a ' + this.network.type + ' connection, woohoo!');
}
  }

}

由程式碼可見實現該功能的核心即是判斷type的型別，網上有些帖子說的是檢測connection的狀態，可能是ionic版本不同的緣故吧，博主試了connection發現不行，參考官網總是沒問題的。

看下效果吧，當未連線網路時，app會一直給出提示（當然也可用setTimeout函式限制時間）