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
events - The
navigator.onLine
property - A third-party package that determines the online/offline status in Angular
We will go into each of these in the following sections.