@seniorbr/ngx-internet-connectivity

NgxInternetConnectivity

Possibilita a detecção de status atual da conetcividade com a internet.
Utiliza a lib Offline.js.

Instalação

npm i offline-js
npm i @seniorbr/ngx-internet-connectivity

Configuração

Importe no modulo ROOT

import { InternetConnectivityModule, InternetConnectivityConfigs } from '@seniorbr/ngx-internet-connectivity';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,  // <-- o HttpClientModule é uma dependência e precisa ser importado;
    InternetConnectivityModule.forRoot({
      testUrl: 'https://sam-api.senior.com.br/api/v1/server/status' // <-- parametro opcional. Se omitido, utiliza metodo original. Veja https://github.com/HubSpot/offline#checking;
    } as InternetConnectivityConfigs),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Importe em feature modules

import { InternetConnectivityModule } from '@seniorbr/ngx-internet-connectivity';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    InternetConnectivityModule,
  ],
  exports: [FeatureComponent]
})

Uso

Reagindo à detecção do status da conexão

import { Component, OnInit } from '@angular/core';
import { InternetConnectivityService } from '@seniorbr/ngx-internet-connectivity';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private onlineSubscription: Subscription;
  private offlineSubscription: Subscription;

  constructor(
    public internetConnectivityService: InternetConnectivityService
  ) {}

  ngOnInit() {
    this.subscribeToOfflineListeners();
  }

  subscribeToOfflineListeners() {
    this.onlineSubscription = this.internetConnectivityService
      .onOnline()
      .subscribe(() => console.log('onOnline'));
    this.offlineSubscription = this.internetConnectivityService
      .onOffline()
      .subscribe(() => console.log('onOffline'));
  }

  unsubscribeFromOfflineListeners() {
    this.onlineSubscription.unsubscribe();
    this.offlineSubscription.unsubscribe();
  }
}

Aplicando classes dependendo do status da conectividade

<section>
  <div internetOn="display-unset" internetOff="display-none">
    Online
  </div>
  <div internetOn="display-none" internetOff="display-unset">
    Offline
  </div>
  <h1 class="home-page-title">
    Offline detection page
  </h1>
  <button (click)="unsubscribeFromOfflineListeners()">stop listening connection</button>
  <button (click)="subscribeToOfflineListeners()">start listening connection</button>
</section>

.display-none {
  display: none;
}

.display-unset {
  display: unset;
}