Hello, i’m trying to check network status in my ionic project.
I followed all the help Ifind in network, with the ionic doc and on the forum but I cant get any issue.
First I create a
- network provider and declare it in my app.module.ts
import { Injectable } from ‘@angular/core’;
import { AlertController, Events, Platform } from ‘ionic-angular’;
import { Network } from ‘@ionic-native/network’;
export enum ConnectionStatusEnum {
Online,
Offline
}
@Injectable()
export class NetworkProvider {
previousStatus;
constructor(public alertCtrl: AlertController,
public network: Network,
public platform : Platform,
public eventCtrl: Events) {
console.log('Hello NetworkProvider Provider');
this.previousStatus = ConnectionStatusEnum.Online;
}
public initializeNetworkEvents(): void {
this.network.onDisconnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Online) {
this.eventCtrl.publish('network:offline');
console.log('online');
}
this.previousStatus = ConnectionStatusEnum.Offline;
});
this.network.onConnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Offline) {
this.eventCtrl.publish('network:online');
}
this.previousStatus = ConnectionStatusEnum.Online;
});
}
}
In second I create methode in my app.components.ts :
import { Component,ViewChild} from ‘@angular/core’;
import { Platform,Events, NavController, AlertController } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { Network } from ‘@ionic-native/network’;
import { NetworkProvider} from ‘…/providers/network’;
import { StartAppPage } from ‘…/pages/start-app/start-app’;
import { HomePage } from ‘…/pages/home/home’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
startPage: any;
rootPage = StartAppPage;
homePage: any = HomePage;
@ViewChild(‘nav’) nav: NavController;
constructor(statusBar: StatusBar,
public splashScreen: SplashScreen,
public plt: Platform,
public events: Events,
public network: Network,
public networkProvider: NetworkProvider
) {
this.plt.ready().then((readySource) => {
console.log('Platform ready from', readySource);
});
// make your native API calls
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
this.initializeApp();
// this.checkNetwork();
// splashScreen.hide();
}
initializeApp() {
console.log(‘go check’);
this.plt.ready().then(() => {
console.log (“in check”);
this.networkProvider.initializeNetworkEvents();
// Offline event
this.events.subscribe('network:offline', () => {
console.log('network:offline ==> '+this.network.type);
});
// Online event
this.events.subscribe('network:online', () => {
console.log('network:online ==> '+this.network.type);
});
});
}
and here what I get in My console :
Hello NetworkProvider Provider
util.js:44 Ionic Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
pluginWarn @ util.js:44
util.js:56 Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’
pluginWarn @ util.js:56
app.component.ts:57 go check
core.js:3688 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
start-app.ts:39 ionViewDidLoad StartAppPage
cordova.js:1021 adding proxy for Device
cordova.js:1021 adding proxy for SplashScreen
cordova.js:1021 adding proxy for StatusBar
cordova.js:1021 adding proxy for NetworkStatus
StatusBarProxy.js:23 StatusBar is not supported
bootstrap.js:10 Ionic Native: deviceready event fired after 830 ms
screen:1 Failed to load resource: the server responded with a status of 404 (Not Found)
app.component.ts:42 Platform ready from cordova
app.component.ts:59 in check
Does somebody can help me !!! because I’ve tried a lot of things and now Ithink my brain is going to get damage .
