[Ionic 4] Checking network status over Browser

Ionic Framework
1

Hi Guys

I’m developing an ionic 4 app where I need to keep track of the current network status and notify the user whenever the status changes. The app should be supported on browser besides mobile devices, so after checking a while I’ve learned that when on mobile, the Network cordova plugin in should be used. This works just excellent! My problem starts when having to detect this at browser level.

Basically, what I do is to wait for the platform to be ready, check where I’m at, and based on this listen for the proper events besides checking the status at that point, something like.

constructor(platform: Platform, network: Network) {
   this.platform.ready().then(() => {
      if (this.platform.is('cordova')) {
          // this is ok
          this.listenForDeviceNetwork();
      } else {
          this.listenForBrowserNetwork();
     }
   });
}

private listenForBrowserNetwork(){
    // also tried with document!
    window.addEventListener('offline', () => { console.log('now you are offline!'); });
    window.addEventListener('online', () => { console.log('now you are online!'); });
     this.isOnline = navigator.onLine;
}

The problem I’m facing is that the navigator.onLine is always returning true, and the events are never fired. Tryied taking out the internet connection as well as setting to the airplane mode, but noting… Also tried to log the navigator.onLine with an interval and check its value, but it is always returning true

setInterval(() => {
    console.log('now ', navigator.onLine);
}, 200);

Does anyone stumbled across this problem? Thanks for the time!

1 Like
2

Here is how my network monitor works:

// NETWORK MONITOR:
  initNetworkMonitor() {
    console.log("init network monitoring...")
    if ('onLine' in navigator) {
      this.appIsOnline = navigator.onLine;
    }
    // check if we are on device or if its a browser:
    if (this.appIsOnDevice) {
      // watch network for a disconnect
      this.network.onDisconnect().subscribe(() => {
        console.log("network disconnected:(");
        this.appIsOnline = false;
      });
      // watch network for a connection
      this.network.onConnect().subscribe(() => {
        console.log("network connected!");
        this.appIsOnline = true;
        if (this.network.type === "wifi") {
          console.log("we got a wifi connection, woohoo!");
        }
        this.sync();
        if (this.sockets) {
          this.sockets.open()
        }
      });
      console.log("device network monitor is ON")
    } else {
      fromEvent(window, "offline").subscribe(() => {
        this.appIsOnline = false;
        console.log("network disconnected:(");
        this.fbdb.afd.database.goOffline();
      }
      );
      fromEvent(window, "online").subscribe(() => {
        this.appIsOnline = true;
        console.log("network connected!");
        this.fbdb.afd.database.goOnline();
        this.sync();
        if (this.sockets) {
          this.sockets.open()
        }
      }
      );
      console.log("PWA network monitor is ON")
    }
    if (!this.appIsOnline) {
      this.fbdb.afd.database.goOffline();
    }
  };
3

Here is the answer: https://stackoverflow.com/questions/57153150/network-plugin-doesnt-work-on-pwa-app-ionic-4