Dynamic Online/Offline Detection of Network Status with RxJS

The network status of an application is a crucial component of an application and its features. Being aware of any changes to the network status serves as a highly beneficial monitor for UI/UX purposes and provides the best user experience possible. When crafting highly powerful web applications, we may need to detect a user's network status for many reasons, such as to determine when to use cached data or to simply display a message/new screen to the user.

Challenges in detecting network status

N avigator.onLine can serve as a useful tool in determining a user's online status, but it is not a reliable source of truth if used alone, especially if a user is connected to a VPN.

"In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking." -MDN Webdocs

Not only is navigator.onLine unreliable as a standalone tool, but it is also only a one-time check. One could use setTimeout() to accomplish multiple/periodic checks, but Tevpro recommends using the popular RxJS library to better "listen" to network statuses.

Furthermore, to more accurately identify when a user is online or offline, it is suggested to use both the window offline and window online events in conjunction with navigator.onLine. Navigator.onLine returns the status of the browser, whereas the window online/offline event is fired when the browser has gained/lost access to the network. Used together, your application will be able to detect network changes more precisely.

Implementation

In your Angular application, create a Network Service to hold the network status's value. In this service, you will create an Observable that encompasses the status/value by merging multiple observables (window offline event, window online event, and navigator.onLine) into a single observable value. Once created, you are able to inject this service into various parts of your application and use this value by subscribing to the observable!

Network Service and the isOnline$ Observable

import { Injectable } from '@angular/core';
import { merge, fromEvent, map, Observable, Observer } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class NetworkService {
  isOnline$ = merge(
    fromEvent(window, 'online').pipe(map(() => true)),
    fromEvent(window, 'offline').pipe(map(() => false)),
    new Observable((sub: Observer<boolean>) => {
      sub.next(navigator.onLine);
      sub.complete();
    }),
  );

  constructor() {}
}

isOnline$ Observable inside the NetworkService

Using the value in the isOnline$ Observable

import { Component, OnInit } from '@angular/core';
import { NetworkService } from './shared/services/networkService/network.service';

@UntilDestroy()
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    readonly networkService: NetworkService,
  ) {}

   ngOnInit() {
      this.networkService.isOnline$
      .subscribe(result => {
      	if (result) {
        	// If user is online 
        }
        else {
        	// If user is offline 
        }
      });
  }
}

isOnline$ subscribed to for usage of its value

Conclusion

Detecting a user's network status and the change in their status can be tricky. It is exceedingly advantageous for any application to iron out its custom implementation and accuracy of the user's online status to provide an enhanced user experience.