native ionic network status doesn't work on my

问题:

I wanted to show alert message when no connection and or connected on all pages, but it's not working. Show network type works, but no alert message show up.

The goal is to show message when APP connected and disconnected. I'm following https://ionicframework.com/docs/native/network/

here is my code in app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';

import { Storage } from '@ionic/storage';
import { Network } from '@ionic-native/network';

import { ClientsListPage } from '../pages/clients/list';
import { JobsListPage } from '../pages/jobs/list';
import { SplashPage } from '../pages/splash/splash';
import { StatusPage } from '../pages/status/status';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = SplashPage;
  pages: Array<{title: string, component: any}>;

  constructor(
    private translate: TranslateService,
    public platform: Platform,
    public network: Network,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public storage: Storage,
    public alertCtrl: AlertController
  ) {
    this.initializeApp();
    this.initTranslate();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'STATUS', component: StatusPage },
      { title: 'JOBS', component: JobsListPage },
      { title: 'CLIENTS', component: ClientsListPage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.listenConnection();
    }).catch(error => console.log(JSON.stringify(error)))
  }

  initTranslate() {
    // Set the default language for translation strings, and the current language.
    this.translate.setDefaultLang('de');
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

  logoutClicked() {
    let confirmation = this.alertCtrl.create({
      title: 'Sind Sie sicher?',
      message: 'Sind Sie sicher, dass Sie sich abmelden möchten? Alle nicht synchronisierten Daten gehen dadurch verloren.',
      buttons: [
        {
          text: 'Abbrechen',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Abmelden',
          handler: () => {
            this.storage.clear().then(
              () => this.nav.setRoot(LoginPage)
            )
          }
        }
      ]
    });

    confirmation.present();
  }

  private listenConnection(): void {
    console.log(JSON.stringify(this.network.type))
    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      let alert = this.alertCtrl.create({title: 'Connection', message: 'Network has been disconnected', buttons: ['OK']})
      alert.present()
    });

    disconnectSubscription.unsubscribe();

    let connectSubscription = this.network.onConnect().subscribe(() => {
      let alert = this.alertCtrl.create({title: 'Connection', message: 'Network has been connected', buttons: ['OK']})
      alert.present()
    })

    connectSubscription.unsubscribe();
  }
}

Thanks,

回答1:

Here is how you can implement a "network monitor" that can work on both device (cordova) and pwa modes. In your case you were unsubscribing from the subscription which you should keep actually.

  // DETECT DEVICE/BROWSER:
  this.appIsOnDevice = !this.platform.url().startsWith('http');

  // INIT NETWORK MONITOR:
  initNetworkMonitor() {
    // check if we are on device or if its a browser
    if (this.appIsOnDevice) {
      // watch network for a disconnect
      this.disconnectSubscription = this.network
        .onDisconnect()
        .subscribe(() => {
          console.log("network disconnected:(");
          // do alert here
        });
      // watch network for a connection
      this.connectSubscription = this.network.onConnect().subscribe(() => {
        console.log("network connected!");
        // app got back online, do logic here
        if (this.network.type === "wifi") {
          console.log("we got a wifi connection, woohoo!");
        }
      });
    } else {
      this.browserOffline = Observable.fromEvent(window, "offline").subscribe(
        () => {
          // go offline logic here
        }
      );
      this.browserOnline = Observable.fromEvent(window, "online").subscribe(
        () => {
          // go back online
        }
      );
    }
  }