Ionic 3 network connectivity check how to implement for all pages (components)?

That’s odd, what is your Ionic version?

Please, show your package.json dependencies section.

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.3
   @ionic/app-scripts : 3.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 8.0.0, ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/mauro/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61
"dependencies": {
    "@angular/animations": "7.2.5",
    "@angular/common": "7.2.5",
    "@angular/compiler": "7.2.5",
    "@angular/compiler-cli": "^7.2.5",
    "@angular/core": "7.2.5",
    "@angular/forms": "7.2.5",
    "@angular/platform-browser": "7.2.5",
    "@angular/platform-browser-dynamic": "7.2.5",
    "@auth0/angular-jwt": "2.1.0",
    "@ionic-native/android-permissions": "5.1.0",
    "@ionic-native/app-version": "5.1.0",
    "@ionic-native/core": "5.1.0",
    "@ionic-native/device": "5.1.0",
    "@ionic-native/geolocation": "5.1.0",
    "@ionic-native/network": "5.1.0",
    "@ionic-native/sim": "5.1.0",
    "@ionic-native/splash-screen": "5.1.0",
    "@ionic-native/status-bar": "5.1.0",
    "@ionic/pro": "^2.0.4",
    "@ionic/storage": "2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/cordova": "0.0.34",
    "angular2-text-mask": "^9.0.0",
    "brmasker-ionic-3": "^1.6.3",
    "cordova-android": "^8.0.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.0.0",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-ionic": "^5.3.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-sim": "^1.3.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.3",
    "ionicons": "4.5.5",
    "ios-sim": "^7.0.0",
    "moment": "2.24.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "6.4.0",
    "sw-toolbox": "3.6.0",
    "text-mask-addons": "^3.8.0",
    "wifiwizard2": "^3.1.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.2",
    "@ionic/lab": "1.0.21",
    "typescript": "~3.2.4"
  },

I’ve seen that change error line with “this.online$ = Observable.merge…” no more error, but i’ve to test if it works…

@addwebsolution I don’t get it. This plugin returns an observable. The thing is I want to check if the device is online or offline on boot. First you need to subscribe to the observable but you don’t observe anything when you first subscribe to it. It needs to detect a network change for you to observe something. You can’t do initial network check with this plugin. I did not try your code but as far as I see even in your code event publish should not work if there is no network change. But is it working? I don’t get the logic.

Had the same problem… Thank you guys

1 Like

Thank you! Helped me a lot! :star:

1 Like

Best Example with Video

2 Likes

Don’t use plugins for network checking, I got a very very and very easy way to check if the user has Internet connection or not, so all we have to do is that to use this:

if (navigator.onLine) {
   console.log('Internet is connected');
} else {
   console.log('No internet connection');
}

At here navigator is not a variable created by me. The navigator. onLine property provides a boolean value whether or not the user is connected to the Internet. … Browser and real device also supports online and offline events whenever the browser is goes offline or comes online.

This is the very easy and working way, I’m sure it will help.

1 Like

missing previousStatus:any;

Hi, I am new to ionic 4 and I used your method. This is what I encounter. Can you advise how to resolve? Thanks in advance.

Please learn typescript and Angular a bit before. You are trying to write Code just somewhere, but it needs to be run in a Methode. I recommend to check this Learning Tutorial: https://angular.io/tutorial

best!!! good!!! nicejob!!!