使用Ionic Native Network插件时浏览器中网络服务无法正常工作

这个问题的核心原因很明确——Cordova的原生插件（包括Network信息插件）无法在浏览器环境（ionic serve）中正常运行，因为这些插件依赖于设备的原生API，浏览器并没有提供对应的底层支持，所以你在浏览器里看到this.network.type为null、Observable不触发都是正常现象。

接下来给你两个关键的解决方向，覆盖设备测试和浏览器调试场景：

1. 确保在设备环境中正确初始化插件 #

即使在真机/模拟器上，直接在构造函数中订阅网络事件也可能有问题——因为Cordova插件需要等平台完全就绪后才能正常工作。你需要修改Connectivity服务，借助Platform.ready()确保插件初始化完成后再监听事件：

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

@Injectable()
export class Connectivity {
  public online: boolean = false;

  constructor(private network: Network, private platform: Platform) {
    // 等待平台就绪后再初始化网络监听
    this.platform.ready().then(() => {
      if (this.platform.is('cordova')) {
        // 监听断开连接事件
        this.network.onDisconnect().subscribe(() => {
          console.log('Network offline');
          this.online = false;
        });

        // 监听连接事件
        this.network.onConnect().subscribe(() => {
          this.online = true;
          console.log('Network online');
          // 可选：额外检查当前连接类型
          console.log('Connection type:', this.network.type);
        });

        // 初始化时设置当前网络状态
        this.online = this.network.type !== 'none';
      }
    });
  }
}

2. 浏览器环境的调试兼容方案 #

如果你需要在浏览器中调试网络状态逻辑，可以添加浏览器环境的 fallback，利用浏览器原生的online/offline事件来模拟：

修改后的完整服务代码：

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

@Injectable()
export class Connectivity {
  public online: boolean = false;

  constructor(private network: Network, private platform: Platform) {
    this.platform.ready().then(() => {
      if (this.platform.is('cordova')) {
        // 真机/模拟器环境使用Cordova插件
        this.setupCordovaNetworkListeners();
      } else {
        // 浏览器环境使用原生事件
        this.setupBrowserNetworkListeners();
      }
    });
  }

  private setupCordovaNetworkListeners(): void {
    this.network.onDisconnect().subscribe(() => {
      console.log('Network offline');
      this.online = false;
    });

    this.network.onConnect().subscribe(() => {
      this.online = true;
      console.log('Network online');
    });

    this.online = this.network.type !== 'none';
  }

  private setupBrowserNetworkListeners(): void {
    // 监听浏览器离线事件
    window.addEventListener('offline', () => {
      console.log('Browser offline');
      this.online = false;
    });

    // 监听浏览器在线事件
    window.addEventListener('online', () => {
      console.log('Browser online');
      this.online = true;
    });

    // 初始化当前状态
    this.online = navigator.onLine;
  }
}

额外注意事项 #

• 测试真实网络切换：必须在真机或者模拟器上运行（执行ionic cordova run android或ionic cordova run ios），ionic serve只能用于调试浏览器兼容的逻辑。
• 插件版本：你的cordova-plugin-network-information和@ionic-native/network版本匹配是没问题的，不用调整版本。

内容的提问来源于stack exchange，提问作者Timmy O'Mahony