Monitor network status changes

Based on Pluralsight Progressive Web Apps: Sensor Integrations By Glen Smith, m5: Sensing Online and Offline

Author: agmo

angular/src/app/app.component.html

@@ -330,7 +330,7 @@
  </g>
  </svg>
 
- <span>{{ title }} app is running!</span>
+ <span>{{ title }} app is running! Status: {{isOnline ? 'online' : 'offline'}}</span>
 
  <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
  <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
@@ -462,7 +462,8 @@ <h2>Next Steps</h2>
  </a>
 
  <a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
- <svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
+ <svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447"
+ viewBox="0 0 21.81 23.447">
  <defs>
  <clipPath id="clip-path">
  <rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>

angular/src/app/app.component.ts

@@ -1,13 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { SwPush, SwUpdate } from '@angular/service-worker';
 import { SubscriberService } from './subscriber.service';
+import { fromEvent } from 'rxjs';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+ isOnline = navigator.onLine;
  isServiceWorkerEnabled = false;
  subscribed = false;
  subscriberId: string;
@@ -32,6 +34,7 @@ export class AppComponent implements OnInit {
  // this.requestNotificationPermissions();
 
  this.setUpUpdateActivation();
+ this.monitorStatus();
  }
 
  disablePushNotifications() {
@@ -88,4 +91,9 @@ export class AppComponent implements OnInit {
  }
  });
  }
+
+ private monitorStatus() {
+ fromEvent(window, 'online').subscribe(() => this.isOnline = true);
+ fromEvent(window, 'offline').subscribe(() => this.isOnline = false);
+ }
 }