Offline Routing Demo

[00:00:00]
>> Kyle Simpson: So that's our most basic of logic. We're using one single strategy for all of our requests, and I'm going to tell you off the bat that it's not going to work for all of our requests. So we're gonna have broken parts of our site. We're not gonna be able to do the login and APIs and stuff like this, but that's okay.

[00:00:18]
We're just gonna test to see if the basic and we click around pages part is working here.
>> Kyle Simpson: So we've updated our version of our service worker. Let's come over here and because this is a pretty substantial change, I'm just gonna go ahead and manually stop and unregister my service worker.

[00:00:44]
Clear out all these logs. And then we'll try to refresh the page, should see, did I not update my version? I thought I did. Yep, need to update the version just so we're on the right track. So let's do that again.
>> Kyle Simpson: Clear this out, clear the cache, stop the service worker, unregister, clear the network cache.

[00:01:19]
You can see there's a whole bunch of ritual that you get involved with as you start developing against service workers. Okay, let's try it again, we refresh, now we're loading service worker version five. Look at our network, it definitely loaded a bunch of stuff. I don't see any major errors, so that's a good sign.

[00:01:39]
Let's come over to our application tab, we have a cache storage with some stuff in it. So that's a good sign. Now let's do our most basic of tests. Let's try going offline. So that's under the Network tab. We're gonna check the offline button. And now, you notice the page says we're offline.

[00:02:02]
Let's cross our fingers and hope that when we click the contact, what did we do wrong? I forgot to use the new operator on the URL constructor. It's the little details, isn't it? All right, let's go back,
>> Kyle Simpson: To our fetch handler, our router rather. Gotta say new URL.

[00:02:37]
>> Kyle Simpson: Let's try this again.
>> Kyle Simpson: Clear out, make sure to turn it back online. Clear out. Cash has been cleared. It's been cleared because we aren't on that page anymore. Okay, so let's try to refresh.
>> Kyle Simpson: We'll just clear all this out one more time. So we're making sure we're on a very clean,

[00:03:21]
>> Kyle Simpson: Okay, we can see it seems to be working fine so now let's go and switch to offline. And I hope this works. We have a page that we served offline. That's a huge big step, isn't it? We've been building up for the last multiple hours just to get to that one little thing, it almost feels a little anti climatic, doesn't it?

[00:03:55]
[LAUGH] But we are actually able to serve these pages. And you'll notice obviously that the style CSS and all those, those are also being served up offline. Okay, let's make one other test really quick. By the way, if you're wondering why you're getting all these network failures in here, it's because in our service worker, we're unconditionally making the fetch request, even when we know we're offline.

[00:04:26]
So your service worker is trying to make a request and it's failing. And that's why that's gonna show up there. And also in your logs, you're gonna see stuff like that. This one, by the way, it's failing to load the new service worker because it's trying to check the service worker every time.

[00:04:42]
But anyway, this is okay. This is not a bad thing, except you might want to just skip the attempt at a network request, if is online is false. There's no reason the frustratingly try that, okay? So we're going to go back online. Clear out all our log stuff.

[00:05:07]
And our page still works, which is good. We're back online. But now, let's see what happens if we kill the server.
>> Kyle Simpson: Let's try to kill our server. And let's go back to that page and let's click, and it still works. So we are online but those fetches to the server are still failing because they're not able to reach to a server.

[00:05:50]
And then we fall back because those fail, we fall back to our cache entries and still serve a graceful experience to the end user.