Detecting Offline Status

[00:00:00]
>> Kyle Simpson: The first thing that we're gonna do is actually not in a service worker, we're gonna start adding some code so that our blog page is able to detect when the user has gone into an offline mode. And to indicate to the user that they are in an offline mode.

[00:00:17]
And part of the reason for that is from a user experience perspective. Users want to know what to expect when they're about to click a button or do something. They don't wanna click a button and then be like, well, thanks for telling me. They would like to be able to know in advance that something happened or that something is gonna happen.

[00:00:36]
So giving them just some sort of visual indication, it doesn't have to be blaring in their face but giving them a visual indication, what you're about to do might not work or what you're about to do may work differently, that's a good friendly way of doing that. So that's our first task before we even do the service worker, we just want for this site to be able to figure out, am I online or not.

[00:00:55]
And there's an API for that, and there's some events for that. So that's our first task. So what I want you to do is switch over to your editor. And I open up again, we're in the SW exercise directory, in the web/JS directory, there's a couple of JavaScript files, there's blog.JS and SW.JS, that's going to be our service worker.

[00:01:17]
So we're going to be working heavily with these two. Later in the exercise we'll work through a couple of other files, but for right now, we're gonna mostly focus our time on these two files. I already have indicated, you can see I already have indicated that there's an offline icon already in the page, it's just not being used.

[00:01:34]
So we're gonna toggle that to visible whenever we've detected that they are offline. So the first thing we need to know is, when we first load the page, generally speaking we are online at that point but when we first load the page we want to know are we online.

[00:01:48]
So I'm gonna make a variable called isOnline similar to this isLoggedIn which i'll explain in just a moment, but this one is going to look at the built-in detector for online status, so there is a property on the navigator object. So we're going to say if and we need to feature detect whether this property is even available.

[00:02:12]
If on capital L line it's weird if on capital L line in navigator that lets us know that this browser supports that API. And pretty much all of them that you'll encounter do, but it's always a good idea to just be a little bit careful. If it is available, then we wanna use the status of that.

[00:02:30]
So we're gonna say, navigator.on, and don't forget the capital L line. And otherwise, let's just assume true, because if this isn't on, we'll just assume that you probably loaded this in an online scenario, okay? So then what we wanna do is detect or based upon that detection, we want to flip the icon visible or not.

[00:02:57]
So basically the icon starts out invisible, and if we are not online at this moment at the page load, when [INAUDIBLE] loaded his file here, we want to actually make that visible. So I'm going to say if not, isOnline at this exact moment, let's start out that icon in the state of being offline.

[00:03:20]
So we're going to say, offlineIcon.classList.remove hidden. Hidden is the name of the class if you inspect the HTML you see this but hidden is the name of the class that is currently making it invisible. So I'm going to remove that class name, thereby making it visible, and then we want to detect changes to it.

[00:03:47]
So we don't wanna just set-up a timer and pull the navigator.online. We wanna set-up listeners that listen for that status changing, and it turns out that there are two events that fire. So we're gonna do window.addEventListener and the event that we want to listen for is if we've gone into the online state.

[00:04:17]
>> Kyle Simpson: We're gonna assume that if we've gone into the online state it was because we were previously in the offline state. So we want to say, offlineIcon.classList.add hidden.
>> Kyle Simpson: And then we wanna change our Boolean variable to true, isOnline equals true.
>> Kyle Simpson: The other event is called offline.

[00:05:02]
So we're gonna listen for that event. And do the reverse, we will offLineIcon.classList.remove hidden and isOnLine equals false
>> Speaker 2: Is this is supposed to be online inNavigator or isNavigator?
>> Kyle Simpson: In.
>> Speaker 3: In.
>> Speaker 2: Sorry about that, in, right. This, don't worry.
>> Kyle Simpson: Sorry, typo.
>> Speaker 2: I was like, whoa.

[00:05:38]
>> Kyle Simpson: We would have found that in just a moment when we ran it, we would have goten a syntax error. Okay, let's try it in our browser. When we refresh we shouldn't see anything different but now when we switch over here and click the offline, we now see that is icon is visible.

[00:05:58]
That's the icon telling the user, hey, you're not connected right now. So just be aware that things might be broken. If you click on something, it may or may not work. Now, we're gonna try to make that as graceful as possible, but obviously, right now, if you were to click on something, everything would fail.

[00:06:15]
And then when we toggle it back, now the icon comes on. We should point out this is only detecting the user's connectivity status. It's not detecting whether or not they have a continuous connection to the server, and we'll be able to load things, you could probably fairly straightforwardly set something like that up with like a web socket that stayed connected, and then if the web socket ever disconnects then show the icon.

[00:06:42]
That would generally not be something I would do with a static webpage, that'd be something I did with an application that really needed live connection, like maybe it's getting live stock ticker updates and it really matters to the second whether I know if I'm connected or not. But here we're just trying to make a good faith effort to let the user know, you're in an offline mode, just expect that you may not be able to do everything that you can do in the normal online mode.