网络插件在 PWA 应用程序 Ionic 4 上不起作用

Question

我使用network plugin，它在本机/Cordova 设备上运行良好。但它不适用于 PWA 应用程序（即当没有 wifi 时）。有什么理由吗？根据上面的文档，它也应该在browser 上工作。

注意：我已关注 this doc 创建 PWA 应用。

network-state.ts

import { Injectable } from '@angular/core';
import { Subscription } from 'rxjs';
import { Network } from '@ionic-native/network/ngx';
import { ShowToastService } from './show-toast.service';

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

  private connectSubscription$: Subscription = null;

  constructor(private network: Network,
    private showToastService: ShowToastService) { }

  WatchConnection() {
    if (this.connectSubscription$) { this.connectSubscription$.unsubscribe(); }
    this.connectSubscription$ = this.network.onDisconnect().subscribe(() => {
      this.showToastService.showNetworkStateErrorToast('Your internet seems to be down! Please check your network settings!');
      if (this.connectSubscription$) { this.connectSubscription$.unsubscribe(); }
      this.connectSubscription$ = this.network.onConnect().subscribe(() => {
        setTimeout(() => {
          this.showToastService.toast.dismiss();
          if (this.network.type === 'wifi' || this.network.type === '4g' || this.network.type === '3g' || this.network.type === '2g' || this.network.type === 'cellular' || this.network.type === 'none') {
            this.showToastService.showNetworkStateSuccessToast('Internet connection available!');
            this.WatchConnection();
          }
        }, 3000);
      });
    });
  }

}

app.component.ts

 async initializeApp() {
    await this.platform.ready();
    this.statusBar.styleDefault();
    this.splashScreen.hide();

    this.networkStateService.WatchConnection();// here

  }

Answer 1

Ionic Native 只有在有可用的 cordova 时才会调用插件。在code here 中，我们检查cordova 是否在窗口上，如果没有，我们会记录一个警告。

在您遵循的指南中，您只是使用标准的 Angular 浏览器构建作为 PWA 发布，它不包括 Cordova，也不应该包括。由于构建中没有包含 cordova，因此 ionic-native 的行为符合预期。

这里的另一种选择是使用电容器，它有一个network plugin，并且与现有的部署工具（角度、pwa）配合得更好

这是getting started guide 和reference guide 的链接