3

If there is a network connection but if internet is not working . example There is a wifi connection but wifi doesn't have internet connection than the browser observable should fire "loaderror" event.

Code: 

import { Component } from '@angular/core';
import { Platform,AlertController,LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Network } from '@ionic-native/network'; 
import { HomePage } from '../pages/home/home';
import { InAppBrowser } from '@ionic-native/in-app-browser';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  public rootPage:any = HomePage;

  constructor(private platform: Platform,private statusBar: StatusBar,private splashScreen: SplashScreen, private network: Network, private alertCtrl: AlertController, private iab: InAppBrowser, private loadingCtrl: LoadingController) {

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.

   let alert = this.alertCtrl.create({
            title: "Network Problem",
            subTitle: 'Internet is not connected' ,
            buttons: [
                {
                    text: 'Close', handler: () => {
                        this.platform.exitApp();
                    }   
                }
            ]
        });
        const loading = this.loadingCtrl.create();
        if(this.network.type !== 'none') {
            loading.present();
            const browser = this.iab.create('http://www.google.com','_blank','location=no,clearsessioncache=yes');
            browser.on("loaderror").subscribe(() => {
                loading.dismiss();
                this.iab.create('http://192.168.2.222/users/dashboard','_blank','location=no,clearsesioncache=yes');
            });
            const sub = browser.on('loadstart').subscribe(() => {
                loading.dismiss();
                sub.unsubscribe();
            },
                err => { loading.dismiss(); console.log('error') ; alert.present()},
                () => { loading.dismiss(); console.log('success') });
        }                   

        /// check connectivity automatically .

        let connectSubscription = network.onConnect().subscribe(() => {
                loading.present();
                const browser = this.iab.create('http://www.google.com','_blank','location=no,clearsesioncache=yes');
                browser.on("loaderror").subscribe(() => {
                    loading.dismiss();
                    this.iab.create('http://192.168.2.222/users/dashboard','_blank','location=no,clearsesioncache=yes');
                }); 
        }); 
        let disconnectSubscription = network.onDisconnect().subscribe(() => {
                const browser = this.iab.create("error.html",'_blank','location=no');       
        }); 

    statusBar.styleDefault();
    splashScreen.hide();
    });
 }
}

But it always load google page, even after the clearsessioncache and internet disconnection it always get loaded. I tested this both on android and Desktop.

jack_07
  • 177
  • 13

1 Answers1

2

You can try as shown below.

Note: Hence it has a certain delay you have to use loader as shown below.

 goToWebPage() {
    const loading = this.loadingCtrl.create();//use loader
    loading.present();
    const browser = this.iab.create('http://www.google.com');
    const sub = browser.on('loadstart').subscribe(() => {
       loading.dismiss();
       sub.unsubscribe();
    },
      err => {  loading.dismiss();console.log('error'); },
      () => { loading.dismiss();console.log('success') });
  }
Sampath
  • 63,341
  • 64
  • 307
  • 441
  • 'if(this.network.type !== 'none') { const loading = this.loadingCtrl.create(); loading.present(); const browser = this.iab.create('http://www.google.com','_blank','location=no, clearsessioncache=yes'); const sub = browser.on('loadstart').subscribe(() => { loading.dismiss(); sub.unsubscribe(); }, err => { console.log('error'); }, () => { console.log('success') }); }' **Even after loading page it didn't show SUCCESS message on console and same for error.** – jack_07 Apr 02 '17 at 07:37
  • use exactly the code snippet which I gave to you.It is perfectly working for me. – Sampath Apr 02 '17 at 10:24
  • it is working but it is taking too much time as i mentioned above. – jack_07 Apr 02 '17 at 12:28
  • That is the nature of that plugin.we cannot do anything for that.the only thing you can do is, just show the loading icon as I showed on my post. – Sampath Apr 02 '17 at 12:33
  • i am running this stuff from app.component.ts , because i just want to load the external page , don't want any single page for my app, so this loading icon doesn't shows up on this browser window. – jack_07 Apr 02 '17 at 12:45
  • but dude When i launch my app it takes 10 sec and when loaderror occurs it again takes 10 sec so total 20. – jack_07 Apr 02 '17 at 12:52
  • No.I have implemented same code above with my app and there is no such cumulative delay.It just takes the 10secs only.it seems an issue on your code.can you put your code in your original post? – Sampath Apr 02 '17 at 13:04
  • Updated @Sampath – jack_07 Apr 02 '17 at 13:16
  • I'm sorry to say that, your code is a huge mess.can you tell me what is your actual business use case? hope then I can help you. – Sampath Apr 02 '17 at 13:58
  • ok,! I want to make an webapp , which loads website which i have already build, all the functionality is there, so i just want to make app which loads this website but user should not aware about this that they using website and not the app. And internet Connectivity is there or not, on any page of my app it should not show that "WEBPAGE IS NOT AVAILABLE " for that i have used "ERROR.html". Subscribing to Internet Connectivity checks for any change in network . – jack_07 Apr 02 '17 at 14:39
  • sorry,still not clear for me.can you share the 2,3 UI images of your app? – Sampath Apr 03 '17 at 01:29
  • It's in the WWW folder. – jack_07 Apr 03 '17 at 04:10