How and why I built Check Internet connectivity in a Web app with "Angular"

About me

UI Engineer (Angular)

The problem I wanted to solve

I had built multiple dashboards (create offers, payments, food articles & many more). During instances of internet disconnection & also a "http" request were made, users faced issues in getting the desired results. Hence, there was a need to notify to them about it with an effective notification solution.

I dig into how to intercept "http" requests & check if the app is online/offline usinf "rxjs". Thereby to provide notification to user about the status on the interface.

What is Check Internet connectivity in web app (Angular)?

"HTTP" Intercept is a concept in "Angular" which intercepts every request & can check in the middleware & manipulate logic according to our needs.
In my case, i wanted to identify the internet status whether online/offline based on the status & notify to the user.

Tech stack

I had built the dashboards with Angular & the framework has a concept called "http-intercept" with "rxjs observables". The problem was solved with these concepts. Below are the code snippets built.

1. Http-Intercept Service:

export class Intercept implements HttpInterceptor {
    constructor() {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      if (!window.navigator.onLine) {
        // if there is no internet, throw a HttpErrorResponse error
        // since an error is thrown, the function will terminate here
        const error = {
          status: 0,
          error: {
            description: 'Check Connectivity!'
          },
          statusText: 'Check Connectivity!'
        };
        return throwError(new HttpErrorResponse(error));
      } else {
        // else return the normal request
        return next.handle(req);
      }
   }
  }

2. Check online/offline in components:

// Observables & Subscriptions to check online/offline connectivity status
  onlineEvent: Observable<Event>;
  offlineEvent: Observable<Event>;
  subscriptions: Subscription[] = [];
  
//Get the online/offline connectivity status from browser window
checkOnlineStatus = () => {
    this.onlineEvent = fromEvent(window, 'online');
    this.offlineEvent = fromEvent(window, 'offline');

    this.subscriptions.push(this.onlineEvent.subscribe(() =>     this.toastr.success('Connected!')));
    this.subscriptions.push(this.offlineEvent.subscribe(() => this.toastr.error('Check Connectivity!')));
  }

The process of building Check Internet connectivity in web app (Angular)

I built components, services wherever we needed to intercept "http" with "rxjs" observables. The main app module triggers the notification & communicates to all the subscribed components whenenver internet is on/off.

Challenges I faced

The challenging part was when the app is idle without any user interaction (when he/she doesn't type, enter or send any requests) also need to notify about internet connection.

Key learnings

Learnt about "http-intercept" in Angular, "rxjs" observables & their potential of solving problems in an effective way.

Tips and advice

Always, listen to the user problems. Think & list the possible solutions to it. Research about it on how to solve it & use the framework/technology to achieve it.

Final thoughts and next steps

I've made this as a component & using every where in the app as a generic module. I'll plan to scale with some more functionalities if there are more use cases.