网络插件不适用于 PWA 应用 Ionic 4

Question

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

注意：我已经按照this doc创建了一个 PWA 应用。

网络-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 是否在 window 上，如果没有，我们会记录警告。

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

这里的另一种选择是使用电容器，它具有 network plugin 并且可以更好地与现有部署工具 (angular, pwa)

这是 link 到 getting started guide and a reference guide

网络插件不适用于 PWA 应用 Ionic 4

Network plugin doesn't work on PWA app Ionic 4

typescript

cordova-plugins

progressive-web-apps

angular

ionic4