# Network detection

**URL:** <https://forum.ionicframework.com/t/network-detection/164745>\
**Category:** Ionic Native\
**Created:** [May 25, 2019, 11:08pm UTC](https://forum.ionicframework.com/t/network-detection/164745 "2019-05-25T23:08:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ninecmoi](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@ninecmoi](https://forum.ionicframework.com/u/ninecmoi)\
**Post date:** [May 25, 2019, 11:08pm UTC](https://forum.ionicframework.com/t/network-detection/164745/1 "2019-05-25T23:08:49Z")

</div>

hello,

i follow this tuto [https://youtu.be/CFoG0xkgVlE](https://youtu.be/CFoG0xkgVlE) from Simon Grimm to check connectivity.

Two remarks :

- displaying status network works fine only if i navigate and come back to the page.

- toast message seems to works only with the last value

I really love to not have to navigate and come back to display the network status.

here is “my” code :

**network service :**

```auto
import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';
import { BehaviorSubject, Observable,of} from 'rxjs';
import { ToastController, Platform } from '@ionic/angular';

export enum ConnectionStatus {
  Online,
  Offline
}

@Injectable({
  providedIn: 'root'
})
export class Network2Service {

  public status: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);

  constructor( private toastController: ToastController, private plt: Platform) { 
    this.plt.ready().then( ()=>{
      this.initializeNetworkEvents();
      let status = this.network.type !== 'none' ? ConnectionStatus.Online : ConnectionStatus.Offline;
      this.status.next(status);
    });
  }

  public initializeNetworkEvents(){
    console.log('initialize network events');
    
    this.network.onDisconnect().subscribe( ()=>{
      if(this.status.getValue() === ConnectionStatus.Offline){
        console.log('We are Offline');
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
    });

    this.network.onConnect().subscribe( ()=>{
      if(this.status.getValue() === ConnectionStatus.Online){
        console.log('We are Online');
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
    });

  }
  
  private async updateNetworkStatus(status: ConnectionStatus) {
    this.status.next(status);

    let connection = status == ConnectionStatus.Offline ? 'Offline' : 'Online';
    let toast = this.toastController.create({
      message: `You are now ${connection}`,
      duration: 3000,
      position: 'middle'
    });
    toast.then(toast => toast.present());
  }

  public onNetworkChange(): Observable<ConnectionStatus> {
   return this.status.asObservable();
  }

  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.status.getValue();
  }

}

```

**component :**

```auto
...
public status:Observable<ConnectionStatus>;
....

ngOnInit() {
 this.network2Service.onNetworkChange().subscribe( status=>this.status=of(status) );
}

```

**view**

```auto
...
    <ion-grid>
        <ion-row><ion-col>Status</ion-col></ion-row>
        <ion-row><ion-col>{{ status | async }}</ion-col></ion-row>
    </ion-grid>
...

```

i’ll try w/out async too: {{status}} , same result.

So how can i display " status" network in live (without navigate and come back) ?

Thank you for help  
n

---

<div class="post-metadata">

**Author:** ![ninecmoi](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@ninecmoi](https://forum.ionicframework.com/u/ninecmoi)\
**Post date:** [May 26, 2019, 8:46am UTC](https://forum.ionicframework.com/t/network-detection/164745/2 "2019-05-26T08:46:02Z")

</div>

I still looking for a solution,  
my readings take me at this question : what is the version of network should i use ?

here is what i have actually :

“@ionic-native/core”: “5.0.0-beta.21”,  
“@ionic-native/network”: “^5.5.1”,

is this version works ? is there someone working with it ?

thank you,  
N

---

<div class="post-metadata">

**Author:** ![ninecmoi](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@ninecmoi](https://forum.ionicframework.com/u/ninecmoi)\
**Post date:** [May 26, 2019, 8:13pm UTC](https://forum.ionicframework.com/t/network-detection/164745/3 "2019-05-26T20:13:23Z")

</div>

basic question : is it possible to hide/show button binded to an observable (based on network detection) ?  
the solution i have works on navigator (testing) but not on device … still stucked ☹

thank you,  
n

---

<div class="post-metadata">

**Author:** ![ninecmoi](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@ninecmoi](https://forum.ionicframework.com/u/ninecmoi)\
**Post date:** [May 27, 2019, 9:00am UTC](https://forum.ionicframework.com/t/network-detection/164745/4 "2019-05-27T09:00:39Z")

</div>

i reply to myself : yes it is possible to hide/show anything based on observable.

i finally change my code (Simon tuto’s above) with this and its work really fine, both on browser and devices !

so i share 🙂

in service :

```auto
import { Network } from '@ionic-native/network/ngx'; (5.6.0 version)

constructor(public network: Network, public platform: Platform) { 
        this.online$ = Observable.create(observer => {
          observer.next(true);
      }).pipe(mapTo(true));
    
      if (this.platform.is('cordova')) {
          // on Device
          this.online$ = merge(
              this.network.onConnect().pipe(mapTo(true)),
              this.network.onDisconnect().pipe(mapTo(false))
          );
      } else {
          // on Browser
          this.online$ = merge(
              of(navigator.onLine),
              fromEvent(window, 'online').pipe(mapTo(true)),
              fromEvent(window, 'offline').pipe(mapTo(false))
          );
      }
      
  }

public getNetworkType(): string {
    return this.network.type;
}

public getNetworkStatus(): Observable<boolean> {
    return this.online$;
}

```

in component

```auto
....
ngOnInit {
...
this.networkSubscriber();
}

 networkSubscriber(): void {
    this.networkService
        .getNetworkStatus()
        .pipe(debounceTime(400))
        .subscribe((connected: boolean) => {
            this.isConnected = connected;
            console.log('isConnected = ', this.isConnected);
            this.handleNotConnected(connected);
        });
  }

handleNotConnected(status){

  if(status === true){
        this.isConnected=true;
        console.log('You are now Online');
        this.presentToast('You are now Online');
      }else{
        this.isConnected=false;
        console.log('You are now Offline');
        this.presentToast('You are now Offline');
      }
  
  }

```

html

```auto
<div *ngIf="isConnected === true && allCampagneCompleted && campagnes.length >0">
      <ion-grid>
        <ion-row>
          <ion-col text-center>
            <ion-button (click)="sync()">Push Data</ion-button>
          </ion-col>
        </ion-row>
        
      </ion-grid>
    </div>

```

A complete working code, for me same logic of Simon’s tutorial , i dont understand why this is working better than the other,  
so if someone have idea, tell me !

thank you,  
n

---

<div class="post-metadata">

**Author:** ![AlizaMalik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/alizamalik/32/129903_2.png) [@AlizaMalik](https://forum.ionicframework.com/u/AlizaMalik)\
**Post date:** [December 21, 2019, 8:08am UTC](https://forum.ionicframework.com/t/network-detection/164745/5 "2019-12-21T08:08:10Z")

</div>

Hi, I use this default approach provided by JavaScript:

```auto
if (navigator.onLine) {
 console.log('Internet is connected');
} else {
 console.log('No Internet Connection found!');
}

```

But it’s not completely perfect way of detecting internet. You can learn more about it in W3School. Here is the quick link:  
[https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref\_nav\_online](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_nav_online)

---

<div class="post-metadata">

**Author:** ![ninecmoi](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@ninecmoi](https://forum.ionicframework.com/u/ninecmoi)\
**Post date:** [January 29, 2020, 1:30pm UTC](https://forum.ionicframework.com/t/network-detection/164745/6 "2020-01-29T13:30:46Z")

</div>

hmm … does the network plugin have a web implementation? When I was working on it, a few months ago, it didn’t have one