Check Online Status by using the NavigatorOnLine API
Even if you have your application fully cached, you couldn’t perform any external request without internet connection. That’s why in order to build an offline-capable application, you must know when it’s actually offline.
This lesson shows you how to use the NavigatorOnLine API and online/offline events in order to disable the functionality to send messages of the application.
Instructor: [00:00] I start by opening the app component and add a data component option here. That has an online property set to false. Then, we need to check if the app is actually online or not when it gets loaded. We can use the mounted hook for that.
[00:22] Here, we'll set this.online = navigator.online. The mounted hook is called when this component is attached to the dom. That way, we make sure navigator or window is there. We still have to listen for the online status changes.
[00:41] For that, we have to use window.addEventListener and listen for the online event, which in that case will show this .online to true. In the same way, we have to listen as well for the offline event. We'll set it to false.
[01:08] I'm adding the online logic here because it's better to have it in one place. Since the app component is the root component of the app, we are making sure there is only one instance. Here, using bills or any other button, that's totally fine.
[01:24] Now that the app knows when it's online or offline, we can use it, for example, in the data view. We could disable the input and then send message from here when it's offline. It doesn't make sense to have it enable when there is no Internet connection, because you cannot send messages.
[01:44] For that data, we have to pass down this online property. First to the data view, online, and in this case, the data view will get it. We have to add it to the props. Then, it will send it to the footer. Then, in the details footer, which is the component with the input on the bottom here, we can get the online properties here as well.
[02:26] Use it to disable to the button when it's not online, and the same for the text field, disabled when it's not online. If I go ahead and turn off the Internet, then you see that the button and the input are disabled. This works as expected. If we turn it on again, they're enabled.
[02:58] We can further improve the user experience by adding a message when it gets offline. In the app component, we could use another snap bar like this one that shows the message, "The app is offline. Some features might be disabled."
[03:25] We will use that show online data. We'll say, "Show online false," and when you get offline, we'll set the show online equal to true. We'll save this and run it. Then, we turn off the Internet, and we'll see the message here.