ionic3实现app启动时进行网络监测功能

原文出处：https://blog.youkuaiyun.com/ffrr33ee/article/details/79602173

需要联网的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函数限制时间）