网络服务在浏览器中不起作用

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}
]

然而，当我运行浏览器中的应用程序时，两个 observable 都没有触发。如果我在提供者构造函数中尝试 print: console.log(this.network.type) ，它只会打印 null.

Answer 1

In my application I use "cordova-plugin-network-information": "^ 2.0.1" and "@ionic-native / network": "^ 4.6.0"

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

'@ 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 2

这里的答案是原生网络插件在浏览器中不起作用。尽管它已 "browser" 列为受支持的平台：

指的是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 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

网络服务在浏览器中不起作用

Network service not working in browser

ionic-framework

ionic-native

ionic3