如何检测ionic 5中的互联网连接

Question

我正在开发一个 android 应用程序，我想检测我的互联网连接何时可用，而不是使用这个 ionic 插件，cordova-plugin-network-information但是当我ionic cordova plugin add cordova-plugin-network-information在命令提示符中运行这个命令时，我收到了这个错误

Unexpected token   in JSON at position 0
[ERROR] An error occurred while running subprocess cordova.    
        cordova.cmd plugin add cordova-plugin-network-information exited with exit code 1.    
        Re-running this command with the --verbose flag may provide more information.

即使我添加了--verbose它，我仍然遇到同样的错误，我使用的是 Windows 10，请问我该如何解决这个问题

Answer 1

该插件为您提供了许多关于连接性质、信号强度等的附加信息。 但是根据您的用例，您可以尝试使用 Web API 添加简单的在线/离线检测功能：

连接.provider.ts：

import { Injectable } from '@angular/core';
import { Observable, fromEvent, merge, of} from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ConnectivityProvider {

  public appIsOnline$: Observable<boolean>;

  constructor() {

    this.initConnectivityMonitoring();

  }

  private initConnectivityMonitoring() {

    if (!window || !navigator || !('onLine' in navigator)) return;

    this.appIsOnline$ = merge(
      of(null),
      fromEvent(window, 'online'),
      fromEvent(window, 'offline')
    ).pipe(map(() => navigator.onLine))

  }

}

通过这种方式，您可以让这段代码在混合构建和 PWA 中工作，并且还避免了额外的二进制功能问题。

这个提供者可以被导入到一个组件中，通过构造函数注入，然后订阅布尔事件流：

this.connectivityProvider.appIsOnline$.subscribe(online => {

    console.log(online)

    if (online) {

        // call functions or methods that need to execute when app goes online (such as sync() etc)

    } else {

        // call functions on network offline, such as firebase.goOffline()

    }

})

这是stackblitz：https ://stackblitz.com/edit/ionic-angular-v5-z34sqf

因此，如果您使用 Chrome 的开发工具性能选项卡并模拟在线/离线，它会非常可靠地工作：