Angular PWA

connection.service.ts:

import {Injectable} from '@angular/core';
import {Observable, Subject} from 'rxjs';

@Injectable()
export class ConnectionService {
  private connEvents: Subject<boolean>;

  constructor() {
    this.connEvents = new Subject<boolean>();

    window.addEventListener('online', (e) => this.handleConnectionChange(e));

    window.addEventListener('offline', (e) => this.handleConnectionChange(e));
  }

  private handleConnectionChange(event: any) {
    this.connEvents.next(this.connected);
  }

  get connected(): boolean {
    return window.navigator.onLine;
  }

  get Changes(): Observable<boolean> {
    return this.connEvents;
  }
}

consume component:

export class CartDetailComponent {
  public connected: boolean = true;

  constructor(private connection: ConnectionService) {
    this.connected = this.connection.connected;
    connection.Changes.subscribe((state) => (this.connected = state));
  }
}