Detect “Back to Online” Status in Angular
Detect When the Browser is Back Online and Multicast Events
In my previous posts, I had mentioned about SSE implementation to send/receive user events in an e-mail service.
How to Create a Server-Sent Events API with Spring Webflux and Kafka
Create an API with text/event-stream Response Type
How to Call Event-Stream APIs in Angular
Listen to Server-Sent Events (SSE) in Your Angular Project
Now, the requirement is that when the user goes offline (away from her/his desk), she/he does not get notified of new e-mail, calendar invites unless she/he refreshes the page or a new event is received. “event-source-polyfill” retries connection and gets connected as soon as the user gets online. Technically, there is no problem. The user gets events when she/he is connected to SSE. The events are not delivered if it is disconnected.
For a smooth user experience, we can add ‘online’ event listener so that when the user is online again, we can act like an event is received and multicasted to its observers via “Subject”.
This only triggers when you are back to online status from offline. So, there will not be any unwanted triggers.
You can read more about it here:
Navigator.onLine - Web APIs | MDN
Returns the online status of the browser. The property returns a boolean value, with true meaning online and false…