Authentication Aware Routing Demo

[00:00:00]
>> Kyle Simpson: Okay, let's take a look at that.
>> Kyle Simpson: Message that can come from the Service Worker. Remember the Service Worker can send force log out. So here I am receiving that in blog JS. I'm receiving the force logout message. I am unsettling the logged in cookie. I am setting my isLoggedIn status to false, and then turning around, and making sure the Service Worker definitely knows we are certainly logged out.

[00:00:33]
>> Kyle Simpson: I don't need to do the redirect here because the Service Worker's gonna take care of that redirect in 100 milliseconds. All right, so with those updates posted, let's demo our page now. A bunch of stuff that's changed so I'm gonna clear everything out. Okay, now that we have that Service Worker cleared out, let's try to refresh our page.

[00:01:02]
>> Kyle Simpson: And there we see v6 of our Service Worker installed, everything looks good. Our network looks good, our cache has been properly filled in with all of the pages that we expect.
>> Kyle Simpson: Let's try to go, click around our page. Let's click on the homepage. And you'll notice that we did do a get ID.

[00:01:29]
We did view an AJAX request just then to get that post ID. So now if I come back to my cache, we're gonna see that API request has been cached now. So now if we go offline, the homepage is still gonna load for us. So let's try that.

[00:01:47]
Let's go offline. And then refresh the homepage. And it was still able to go and get that. Now, we haven't loaded this blog post. So when I click it, it can't load that which is why we get the friendly offline page. But we're gonna take care of caching blog post content here in just a moment, okay?

[00:02:10]
But at least the pages that we've proactively cached, we can get. Let's go back online for a moment.
>> Kyle Simpson: And let's log in.
>> Kyle Simpson: And then let's go offline. And let's refresh to see that we still have add post loading. If we come back to our cache, we note now that add-post is now been cached.

[00:02:48]
That wasn't being cached before because this is a session aware thing. But since we went there while we were online, that's now been added to our cache, and we can come back to it even when we're offline. So I could have been writing up a blog post and then I got on a plane, and now I no longer have Wi-Fi.

[00:03:04]
But I still have a page that I can do something with. Or if this was a comment on a blog, a commenter can still do something useful. They don't get the blank screen of death because they can't connect to the server. So if I were, if I'm offline and I try to do something like, actually send out a post.

[00:03:28]
Well, of course that AJAX call is gonna fail. We're gonna try to make an API post. And that's gonna fail and the page says posting failed. Try again. But, we can actually add additional graceful handling here which says if you try to click the Add Post while you're in the offline state.

[00:03:45]
We could actually tell the user, hey, it looks like you're offline right now. But we'll try posting when you're back online. So, we can do all kinds of things to help improve this user experience with the service worker. And then of course, once we go back online, now when we click add post, it just works, okay?

[00:04:09]
And now that we've cached both of those blog posts. If we come over here and we look in our cache, both of those have now been cached because we visited them. Which means now if we go offline, and we're clicking around on your page, and we're trying to read blog posts.

[00:04:30]
Hey, the blog posts are still there. So we solved my main used case. I can still read your blog post when I get on an airplane. That deserves some applause, come on, that's a big step, right? Come on.
>> Speaker 2: [APPLAUSE]
>> Kyle Simpson: Okay, that was a cheap ploy for applause.

[00:04:47]
>> Speaker 2: [LAUGH]