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

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

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

标签： ionic-frameworkionic3ionic-native

Answer 1

这里的答案是本机网络插件在浏览器中不起作用。即使它已将“浏览器”列为受支持的平台：

它指的是不同于 Web 浏览器的Cordova 浏览器。我在 Ionic Slack 频道讨论后发现了这一点。

您需要改为编写一个提供程序：

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

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

• 以下是关于为什么您有两个不同的 API 可用的一些说明
• 这是使用多种方法查找位置的提供程序示例（这与我的问题不同，但在解决方案中类似，因为它使用浏览器 API 以及 Ionic Native API）