Question

我已经编写了一个提供程序来帮助使用Native Network插件跟踪网络连接：

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) {
        this.network.onDisconnect().subscribe(() => {
            console.log('Network offline');
            this.online = false;
        });

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

我已经安装了相关插件（package.json）：

"cordova-plugin-network-information": "^2.0.1",
...
"@ionic-native/network": "^4.7.0",

我已将我的提供商纳入我的app.module.ts：

providers: [
    Network,
    StatusBar,
    SplashScreen,
    Connectivity,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]

然而，当我在浏览器中运行应用程序时，两个可观察者都没有开火。如果我在提供者构造函数中尝试打印：console.log(this.network.type)，则只打印null。

Answer 1

这里的答案是本机网络插件在浏览器中不起作用。即使它有＆＃34;浏览器＆＃34;列为支持的平台：

它指的是与网络浏览器不同的Cordova Browser。在讨论了Ionic Slack通道后，我发现了这一点。

您需要编写一个提供商：

检测平台
如果在本机设备上，请使用本机网络插件
如果在浏览器中，请使用浏览器API

对于有同样问题的其他人：

Here is some clarification on why you have two different APIs available
Here is an example of a provider that uses a variety of approaches for finding location（这与我的问题不同，但在解决方案中类似于使用浏览器API和Ionic Native API）

Answer 2

在我的应用程序中，我使用＆＃34; cordova-plugin-network-information＆＃34;：＆＃34; ^ 2.0.1＆＃34; 和＆＃34; @ ionic-native / network＆＃34;：＆＃34; ^ 4.6.0＆＃34;

我可以分享我使用的相同服务。目前正在运作

'@ angel / core' import {Injectable};
From the '@ Ionic-native / network' resource {Network};

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

@Injectable()
export class NetworkProvider {

  constructor(private _network: Network) { }

  isConnectInternet() {
    return this._network.onConnect();
  }

  isDisconnect() {
    return this._network.onDisconnect();
  }

    enter code here

  connectionType() {
    if (this._network.type == 'none' ) {
      return false;
    } else {
      return true;
    }
  }

}

Answer 3

我正在将此服务用于我的项目，该项目位于以下环境

cli packages: 

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

这是我的提供者文件network.ts。

import { Functions } from './../functions';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network';
import { Events } from 'ionic-angular';

/*
  Generated class for the NetworkProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

export enum ConnectionStatusEnum {
  Online,
  Offline
}


@Injectable()
export class NetworkProvider {

  previousStatus;
  constructor(public functions:Functions, 
              public network: Network,
              public eventCtrl: Events) {

                this.previousStatus = ConnectionStatusEnum.Online;
  }

  public initializeNetworkEvents(): void {
    this.network.onDisconnect().subscribe(() => {
        if (this.previousStatus === ConnectionStatusEnum.Online) {
            this.eventCtrl.publish('network:offline');
        }
        this.previousStatus = ConnectionStatusEnum.Offline;
    });
    this.network.onConnect().subscribe(() => {
        if (this.previousStatus === ConnectionStatusEnum.Offline) {
            this.eventCtrl.publish('network:online');
        }
        this.previousStatus = ConnectionStatusEnum.Online;
    });
}

Answer 4

确保您正在运行

ionic cordova run browser

不是

ionic serve

网络服务无法在浏览器中运行

4 个答案: