Handling the offline status

Now that we have configured a service worker in both of our apps, we can think of a way to handle the offline status message, so that each one of our components will be able to behave in a different way when the app is offline—such as limiting their features and showing an offline status informative message to our users.

To implement these conditional behaviors, we need to find a way to properly determine the browser connectivity status, that is, whether it's online or not; in the following sections, we'll briefly review several different approaches that we can use to do that to make the (arguably) best possible choice. These approaches are:

• The window's ononline/onoffline event
• The Navigator.onLine property
• The ng-connection-service npm package

Option 1 – the window's ononline/onoffline event

If we're willing to accept a pure JavaScript way to handle this, such a task can be...