And we'll have it say something like, sorry it looks like you're offline. Okay so now we have this obnoxious banner at the top but we are not offline right now so it really shouldn't be displaying for us. So instead we're going to make this conditional based on the value of a data attribute called isOffline. And let's add this into our data properties at the bottom. And we can start it. Instead of just using false or true we should be able to call navigator.onLine which returns a boolean if we do or don't have internet. Oh this should be the opposite value. So we want isOffline to be true if online is false. And back in the browser our banner is gone which is what we expect. So perfect. But now we need to check whenever the user comes on or offline. This is easy if we add two event listeners to our application. So at the bottom of our

gone which is what we expect. So perfect. But now we need to check whenever the User comes on or offline. This is easy if we add two event listeners to our application. So at the bottom of our mounted method we can add window.addEventListener for offline. And that's an empty function that is just going to change our data attribute isOffline to true. And likewise for the online, isOffline is false. And we basically want these listening as long as the application is running so I'm not going to add any removeEventListener calls in the beforeMount method. I'm just going to keep this as is. Now let's see this in action. All right in our browser I'm online and I don't see any banner. But if I were to go ahead and disconnect my Wi-Fi we can see this immediately pop up that sorry it looks like you're offline. Which is perfect. It's showing our users that I'm offline and anything that I might have to do

disconnect my Wi-Fi we can see this immediately pop up that sorry it looks like you're offline. Which is perfect. It's showing our Users that I'm offline and anything that I might have to do in an offline first application like syncing up with a database could be hindered by that. And turning my Wi-Fi back on again. After a few seconds the banner clears up because my connection is back online. Speaking of coming back online, in either of these event listeners, so let's say when the User comes back online, I might want to sync up a User's data with an external API. So when they come back online I can save any changes that might have occurred whenever they were working on the website offline and make sure that they didn't lose any of their changes. So I could have a method in this view app called like syncUserData that fires regularly. And then the best thing about that is that if we had that method

So I could have a method in this view app called syncUserData that fires regularly. And then the best thing about that is that if we had that method I could check to make sure that the user is online first. If this is offline then I would want to return here and not continue on with the rest of the method. And then down here make my API request to an external server. That way let's say we had something in the background running every minute or so calling this method, syncing up our user data to an offline server. If my connection were to go down it would stop here, which would prevent any kind of error coming back whenever this API request was made. Now normally our users might not know that, but we add it in that banner to display whenever this is offline data attribute is set to true. So they know their data isn't getting synced up to the offline server, and then as soon as that changes and they