Сетевой сервис не работает в браузере

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

Ответ здесь заключается в том, что собственный сетевой плагин не работает в браузере.Несмотря на то, что в качестве поддерживаемой платформы указан «браузер»:

Это относится к Cordova Browser , который отличается от веб-браузера.Я узнал об этом после обсуждения на канале Ionic Slack.

Вместо этого вам нужно написать провайдера, который:

• Обнаруживает платформу
• Если на нативном устройстве используется плагин собственной сети
• Еслив браузере используйте браузер API

Для других с такой же проблемой:

• Вот несколько пояснений, почему у вас есть два разных API
• Вот пример провайдера, который использует различные подходы для поиска местоположения (это не то же самое, что мой вопрос, но похоже на решение, так как используетAPI браузера, а также Ionic Native API)

Answer 2

Я использую этот сервис в своем проекте, который находится в следующей среде

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 3

В моем приложении я использую «cordova-plugin-network-information»: «^ 2.0.1» и «@ 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;
    }
  }

}