I am trying to write a component that will detect whether the app is online or offline so it can trigger another event. Is there a built-in function that can be leveraged?
- To listen to and react to change, you need an event handler. In Angular, Observables are best
To be notified of the app coming online or going offline, rely on the online/offline events
online$ = fromEvent(window, 'online'); offline$ = fromEvent(window, 'offline');
Chain your other events to these:
online$.subscribe(e => this.syncWithServer());
Also see this article about
navigator.onLine. Note that browsers don’t implement this event uniformly. In some cases, “online” just means that the browser is connected to a local network, not the internet. To get more reliable information, you may need to test by trying to ping a remote server when the event fires.
online$ = fromEvent(window, 'online').pipe( switchMap(e => this.pingServer()), filter(e => e) ); offline$ = fromEvent(window, 'offline').pipe( switchMap(e => this.pingServer()), filter(e => !e) );
pingServer will make a remote request and return an observable that emits
true when the request is successful, or