I've been utilizing the network plugin successfully on native/Cordova devices. However, I have encountered an issue when trying to use it on a PWA app (specifically when there is no wifi connection). Can anyone shed light on why this might be happening? As per the documentation provided, it should work on the browser as well.
Note: I followed the instructions in this document to create the PWA application.
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
}