Ionic 3如何在页面切换时检测网络连接？求全局断网弹窗方案

Hey Prashant, let's tackle this network detection issue in your Ionic 3 app. The key here is to set up global network state monitoring instead of manually triggering checks on every page switch—this will cover both page transitions and unexpected network drops anywhere in the app. Here's a step-by-step optimized solution:

First, update your existing Network Provider to handle automatic network state listening and unified alert/toast logic. This keeps all network-related code in one place, making it easy to maintain:

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network';
import { ToastController, AlertController } from 'ionic-angular';

@Injectable()
export class NetworkProvider {
  private isConnected: boolean = true;

  constructor(
    private network: Network,
    private toastCtrl: ToastController,
    private alertCtrl: AlertController
  ) {
    // Initialize listeners as soon as the provider is created
    this.initNetworkListeners();
  }

  private initNetworkListeners() {
    // Listen for network connection
    this.network.onConnect().subscribe(() => {
      // Add a small delay to handle cases where WiFi connects but no internet is available yet
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.isConnected = true;
          this.showToast('网络已恢复连接');
        }
      }, 3000);
    });

    // Listen for network disconnection
    this.network.onDisconnect().subscribe(() => {
      this.isConnected = false;
      this.showDisconnectAlert();
    });
  }

  // Manual check for current network state (useful for page transitions)
  checkCurrentNetworkStatus(): boolean {
    this.isConnected = this.network.type !== 'none';
    return this.isConnected;
  }

  private showToast(message: string) {
    const toast = this.toastCtrl.create({
      message: message,
      duration: 3000,
      position: 'top'
    });
    toast.present();
  }

  private showDisconnectAlert() {
    const alert = this.alertCtrl.create({
      title: '网络连接失败',
      message: '请检查你的网络设置，确保设备已连接到互联网',
      buttons: [{
        text: '确定',
        handler: () => {
          // Optional: Add retry logic or link to device network settings here
        }
      }]
    });
    alert.present();
  }
}

Make sure the network listeners kick off as soon as the app launches by injecting the provider into your AppComponent. This ensures you catch network issues right from the start:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { NetworkProvider } from '../providers/network/network';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = 'HomePage';

  constructor(platform: Platform, private networkProvider: NetworkProvider) {
    platform.ready().then(() => {
      // Check network state once when the app starts
      const isConnected = this.networkProvider.checkCurrentNetworkStatus();
      if (!isConnected) {
        this.networkProvider.showDisconnectAlert();
      }
    });
  }
}

If you want to double-check the network state every time a user navigates to a new page (e.g., after coming back from the background), create a base page class that all your pages inherit from. This avoids repeating code across every page:

// src/pages/base/base.ts
import { Component } from '@angular/core';
import { NetworkProvider } from '../../providers/network/network';

@Component({
  template: ''
})
export class BasePage {
  constructor(private networkProvider: NetworkProvider) {}

  // Triggered right before a page becomes active
  ionViewWillEnter() {
    const isConnected = this.networkProvider.checkCurrentNetworkStatus();
    if (!isConnected) {
      this.networkProvider.showDisconnectAlert();
    }
  }
}

Then inherit this base class in all your actual pages:

import { Component } from '@angular/core';
import { BasePage } from '../base/base';
import { NetworkProvider } from '../../providers/network/network';

@Component({
  templateUrl: 'home.html'
})
export class HomePage extends BasePage {
  constructor(networkProvider: NetworkProvider) {
    super(networkProvider);
  }
}

• Global coverage: The network listeners run in the background, so you'll get an alert immediately if the network drops, no matter which page the user is on.
• DRY code: No need to manually call detection logic on every page switch—either the global listener or base page handles it.
• Reliable startup check: Catches cases where the app launches with no network connection.

• Ensure you've installed the @ionic-native/network plugin and registered both the plugin and your NetworkProvider in app.module.ts.
• The 3-second delay in the onConnect handler fixes edge cases where the device connects to a network but hasn't established full internet access yet.
• You can customize the alert/toast UI or add extra features (like a retry button) based on your app's needs.

内容的提问来源于stack exchange，提问作者Prashant