in app.component.ts File
import { Network } from '@ionic-native/network';
import { InternetProvider } from '../providers/internet_provider';
import { NoInternetPage } from '../pages/no-internet/no-internet';
constructor(public InternetProvider: InternetProvider,private network: Network) {
platform.ready().then(() => {
// watch network for a connection if Disconnected
this.network.onDisconnect().subscribe(() => {
if(this.current_page != 'NoInternetPage'){
this.nav.push(NoInternetPage);
this.current_page = 'NoInternetPage';
this.InternetProvider.networkConnected = false;
console.log('network Disconnected!');
}
});
// watch network for a connection
this.network.onConnect().subscribe(() => {
console.log('network connected!');
this.InternetProvider.networkConnected = true;
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait.
// prior to doing any api requests as well.
setTimeout(() => {
if (this.network.type === 'wifi') {
if(this.current_page == 'NoInternetPage'){
this.nav.pop();
console.log('wifi');
}
}
if(this.network.type === '4g'){
if(this.current_page == 'NoInternetPage'){
this.nav.pop();
console.log('4g');
}
}
if(this.network.type === '3g'){
if(this.current_page == 'NoInternetPage'){
this.nav.pop();
console.log('3g');
}
}
if(this.network.type === '2g'){
if(this.current_page == 'NoInternetPage'){
this.nav.pop();
console.log('2g');
}
}
}, 3000);
});
}
In NoInternetPage.ts
import { InternetProvider } from '../providers/internet_provider';
constructor(public InternetProvider: InternetProvider,)
tryagain() {
let ref = this.viewCtrl.pageRef();
if(ref.nativeElement.localName =='page-no-internet'){
console.log('success');
}
if (this.InternetProvider.networkConnected == true && ref.nativeElement.localName =='page-no-internet'){
let toast = this.toastCtrl.create({
message: 'Network Connected',
duration: 3000,
position: 'top'
});
toast.present();
this.navCtrl.pop();
}
else{
let toast = this.toastCtrl.create({
message: 'Network Not Connected',
duration: 3000,
position: 'top'
});
toast.present();
}
}
In NoInternetPage.html
<ion-content padding >
<p text-center>
It Seems Like You are not connected to Internet. Please Check Your Internet Connection Settings.
</p>
<div padding text-center>
<button ion-button color="primary" (click)="tryagain()">Try Again</button>
</div>
</ion-content>
in InternetProvider .ts
export class InternetProvider {
// Check Current page for No internet Page
networkConnected: any;
current_page: any;
constructor(private app: App) {
}
}