Service Worker Project

[00:00:00]
>> Kyle Simpson: The site that I've built for you, and I use air quotes with that, is a very, very simple blog, sort of a site, that has a couple of static pages on it. Couple of images, the CSS request, but it also has a feature where you can write a blog post, which just saves some HTML to a file, basically.

[00:00:21]
So what I'm gonna do is first start up the finished version of that, just to kind of click around and show you how all of that works. Or not the finished version, rather, the exercise version. So if you go and start your server, you just type, in the sw-exercise directory, type in node server.js.

[00:00:46]
And again, it's gonna to be on port 8049. And so we're gonna switch over to our browser and try 8049. And you'll notice it looks very similar to the other one because that is the entirety of the CSS that I was willing to dedicate to this project. So I reused it for this project [LAUGH].

[00:01:08]
But you'll notice it loads a little image, and it's gonna have a couple of pages that you can click around on. It's not linked to, but this does support being able to log in. So if you knew that you could go, or you had bookmarked that URL, you can go to a login page.

[00:01:27]
The username and password are hardcoded in the server code, which is a terrible idea but this is super hacky. The username is admin and the password, all lowercase, all together, is changeme.
>> Kyle Simpson: And if you click the Login button, this is the only thing you can do while logged in, is add a post.

[00:01:51]
So there's no admin page or whatever, this is real barebones. But you can actually add a blog post, so I'm gonna say, this is my first blog post. And then you have to actually type some HTML here, so I'm gonna do a paragraph tag, this is pretty cool, isn't it?

[00:02:14]
And we'll throw in another paragraph that says, let's get to some code. Okay, and then you click Add Post, and now you have a blog post. This is, you'll notice the URL there, it's a post with that ID. And then if you go back to the home page, that post is now listed.

[00:02:38]
So if you add more posts to your thing, they're gonna be listed in most recent first order. And then you can click on those to see your blog posts. So that's the entirety of the functionality of this app, it's not mind blowing. By the way, once you're logged in, if you go back to login, it'll redirect you to add post.

[00:03:02]
Unless your session has expired, in which case then you have to log in again. Or you can actually click log out, if you really wanna log out, and now you would have to log back in. So that's the basic bare bones of this site. And what we wanna do is build and add a service worker to this site.

[00:03:21]
It's not an app, it's a site, and we want this site to act as if it's gonna continue to behave as closely as possible in an offline, or sort of bad network scenario, as it does when we're in the online scenario. And by the way, there's at least two different ways that you could think about being offline or being in a bad network scenario.

[00:03:45]
One is that the user's device is disconnected. The other is that, for some reason, they're online, but for some reason, they can't get to your server. Either there's a bad problem with routing on the internet or your server is down. But in both cases, they really shouldn't be presented with the blank screen of death, they really should continue to see the site.

[00:04:06]
At least as it was the last time they loaded that. So that's our goal, is to try to get this as close as possible. It's not 100%, but we can get a lot better than what it currently is. To show you the blank screen of death, I'm gonna show you that in network tab of your developer tools, you can simulate an offline scenario by clicking offline.

[00:04:28]
That's under the network tab in Chrome developer tools, and there's a checkbox there that says offline. And now, you see this little icon there that's let you know that it is turned off. So if we come back here, and we try to click on a page, now we get the white screen of death.

[00:04:44]
Right, because this is what people experience whenever they don't have Internet. We come back here and turn the Internet back on, we refresh the page, and now the page is back. That's one scenario for that dying. The other scenario for it dying is if the server is somehow unavailable.

[00:05:01]
So we're gonna do both of these, by the way. As we go through the exercise, we're both gonna toggle the offline mode, and then we're gonna kill our server. And we want our site to continue to behave in both of those. And we need to do code slightly differently depending upon those scenarios.

[00:05:16]
So we'll talk through all of these things, but now when I come back to the browser, I ought to be able to see this page and not die. And we got a slightly different kind of error page in Chrome which has always confused me. I don't know why they have different error pages.

[00:05:30]
But anyway, that's the point, is that we want to make that stuff not happen. And the way we're gonna go about that is through service workers.