ng-connection-service

ng-connection service

Monitor active internet connection reactively in Angular and Ionic applications

• Detects whether browser has an active internet connection or not in Angular application.
• Detects whether your API Server is running or not in Angular application.

Version support

Version	Angular supported versions
13.0.0	v16-v17
9.0.3	v9-v15
1.0.4	<=v8

Note This library is updated to support most of the Angular versions, Stay tuned for updates.

Install

You can get it on npm.

npm install ng-connection-service --save

You can get it on yarn.

yarn add ng-connection-service

Setup

• Import HttpClientModule and ConnectionServiceModule into your application AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ConnectionServiceModule } from 'ng-connection-service';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ConnectionServiceModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage - Check only internet connection status

• Inject ConnectionService in Angular component's constructor, subscribe to monitor() method.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ConnectionService, ConnectionServiceOptions, ConnectionState } from 'ng-connection-service';
import { Subscription, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'demo';

  status!: string;
  currentState!: ConnectionState;
  subscription = new Subscription();

  constructor(private connectionService: ConnectionService) {
  }

  ngOnInit(): void {
    this.subscription.add(
      this.connectionService.monitor(options).pipe(
        tap((newState: ConnectionState) => {
          this.currentState = newState;

          if (this.currentState.hasNetworkConnection) {
            this.status = 'ONLINE';
          } else {
            this.status = 'OFFLINE';
          }
        })
      ).subscribe()
    );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

Usage - Check YOUR API Server connection status

• Inject ConnectionService in Angular component's constructor, subscribe to monitor() method. Here hasInternetConnection boolean property informs if given server URL passed via heartbeatUrl property is reachable or not.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ConnectionService, ConnectionServiceOptions, ConnectionState } from 'ng-connection-service';
import { Subscription, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'demo';

  status!: string;
  currentState!: ConnectionState;
  subscription = new Subscription();

  // Note: if you prefer inject()
  // connectionService = inject(ConnectionService);

  constructor(private connectionService: ConnectionService) {
  }

  ngOnInit(): void {
    const options: ConnectionServiceOptions = {
      enableHeartbeat: false,
      heartbeatUrl: 'https://localhost:4000',
      heartbeatInterval: 2000
    }
    this.subscription.add(
      this.connectionService.monitor(options).pipe(
        tap((newState: ConnectionState) => {
          this.currentState = newState;

          if (this.currentState.hasNetworkConnection && this.currentState.hasInternetAccess) {
            this.status = 'ONLINE';
          } else {
            this.status = 'OFFLINE';
          }
        })
      ).subscribe()
    );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

• Note that we have passed configuration object to monitor() function to watch application server status.

 const options: ConnectionServiceOptions = {
      enableHeartbeat: false,
      heartbeatUrl: 'https://localhost:5000',
      heartbeatInterval: 2000
    }

Demos

You can find demos in GitHub repository under directory projects/demo/.

• Angular v9 Demo
• Angular v10 Demo
• Angular v11 Demo
• Angular v12 Demo
• Angular v13 Demo
• Angular v14 Demo
• Angular v15 Demo
• Angular v16 Demo
• Angular v17 Demo

API

You can configure the service using ConnectionServiceOptions configuration variable. Following options are available;

/**
 * Instance of this interface could be used to configure "ConnectionService".
 */
export interface ConnectionServiceOptions {
  /**
   * Controls the Internet connectivity heartbeat system. Default value is 'true'.
   */
  enableHeartbeat?: boolean;
  /**
   * Url used for checking Internet connectivity, heartbeat system periodically makes "HEAD" requests to this URL to determine Internet
   * connection status. Default value is "//internethealthtest.org".
   */
  heartbeatUrl?: string;
  /**
   * Interval used to check Internet connectivity specified in milliseconds. Default value is "30000".
   */
  heartbeatInterval?: number;
  /**
   * Interval used to retry Internet connectivity checks when an error is detected (when no Internet connection). Default value is "1000".
   */
  heartbeatRetryInterval?: number;
  /**
   * HTTP method used for requesting heartbeat Url. Default is 'head'.
   */
  requestMethod?: 'get' | 'post' | 'head' | 'options';

}

Demo

Working demo

Contributors

Thank you to the following contributors who have helped improve this project by submitting pull requests:

• @anandkushwaha064: Upgraded library to v16-17
• @yildiraymeric: Upgraded library to v7

License

MIT License © Balram Chavan