Webpack 2 Deep Dive Webpack 2 Deep Dive

Offline with Service Workers

Check out a free preview of the full Webpack 2 Deep Dive course:
The "Offline with Service Workers" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

The Webpack Offline plugin adds offline capabilities through the use of Service Workers. Once the plugin is configured, assets will be cached offline and accessible if there isn’t a network connection. Kent also talks about how to disable this functionality in the development environment since offline caches are not necessary. Code for this example is on the FEM/07.0-offline branch. - http://slides.com/kentcdodds/webpack-deep-dive#/18/1

Get Unlimited Access Now

Transcript from the "Offline with Service Workers" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kent C Dodds: Okay, now we're gonna get to something really exciting. When I discovered this I was holy shnikies, this is so easy. Okay, so that's the extract.css, we can check that out, which apparently is maybe broken somehow. I'm sorry, I'll look at it. So offline Progressive Web Apps fun stuff, this is great.

[00:00:27] So in modern web browsers now you have this cool thing called Service Worker and that allows you to have things that are offline. I actually, well I'm not going to show you that, but actually JavaScriptAir.com this is my podcast and it's awesome. This week we're gonna be talking about how to be a mentor.

[00:00:48] Check this out, the past present and future of JavaScript with Brendan Eich. [SOUND] Yeah, that was an awesome show. So JavaScript Air is actually built with React and it is a static web site. So it's actually generated at build time which is pretty cool. So one other cool thing about it, is it actually works totally offline.

[00:01:13] So if I turn off my Wi-Fi, hopefully I can turn it back on safely. But I'll open an entirely new tab and it totally works. If I go to Google.com, no no, no, no. But JavaScript Air I can refresh. Totally works offline and it's using a technology called Service Worker.

[00:01:30] Well, I'd show you it on my phone, but I think you get the idea, it's awesome. Service Worker requires HTTPS. So if you're not using HTTPS, shame on you, and you should be doing that. No, sorry not shame on you, but please do that. But yeah, what we're gonna do is add Service Worker to our app.

[00:01:52] And there are just a couple of things we need to do to do that. There is a plugin that does this for us. So this last little bit is just the rise of the plugins that just do magical things for us. And so somewhere in here we're going to say offline-plugin.

[00:02:12] If that's not a generic name that doesn't describe that it's a webpack plugin I don't know what it is, but it's 3.4.2 so I actually realized just today that I had this. I'm not sure what's doing this for me, but it's auto completing the versions. What, that's that's so cool!

[00:02:30] So yeah, but that's the latest version and that's the one that you should have when you installed stuff. So there are a couple things we need to do to make this work, just a handful. The first is, we'll go to our webpack config and yet again we're gonna pull in the OfflinePlugin from require offline-plugin.

[00:02:54] And then we'll go down to our plugins array and at some point, I'm pretty sure it doesn't matter where, we can say new OfflinePlugin. And then all that we need to do and actually, I think I heard that it was possible to do a little bit of configuration in here to have it auto install in your app.

[00:03:17] But we're gonna do it manually just so you see it a little bit more of what's going on here. So here we'll go into our bootstrap. And in the bootstrap is where we want to actually turn on the offline capability. So we're going to import install, oops.
>> Kent C Dodds: as offline, oops.

[00:03:40]
>> Kent C Dodds: Because install isn't a very descriptive name, from offline-plugin/runtime. And then we're gonna take that offline install and in our bootstrap we're just gonna call it.
>> Kent C Dodds: And if we run the dev server.
>> Kent C Dodds: [SOUND] We refresh and we start getting, actually I didn't refresh, it refreshed for me.

[00:04:13] We start getting this SW Install event and Cached assets and yada yada yada. And now if you see here, you see a couple of things that have the little gear icon next to them. That means that they're being served from the service record. So if I refresh, well, things are a little bit funny in development.

[00:04:36] But we'll take a look at production here in a little bit. But if you go to Application and look at Service Worker, you'll see that it's installed. And you can, let's see, there's a place to inspect the Service Worker somewhere. Hold up. Yeah, so you can look at what the Service Worker looks like.

[00:04:58] The Service Worker is just responsible for caching all of your assets and so the Service Worker plugin generates this Service Worker. Whoa, that's a spider.
>> Multiple: [LAUGH]
>> Kent C Dodds: Aah! Sorry I should have screamed. And based off of all the things that we need for our application like all of our assets for our application.

[00:05:24] And it will, when the browser goes to make a request for it, it will say is this thing in the Service Worker cache? If it is then just serve it from the cache. If it's not then go to the server and get it and then cache it. And so then you don't need to worry about loading it when it, yeah, when you've already cached it.

[00:05:45] So the cool thing about this is we already talked about long term caching with having that chunk cache and everything. That's all cool and stuff, but the browser is just gonna throw up its hands if it's offline unless there's a Service Worker installed. So I'm gonna do one other thing.

[00:06:04] Where did it go? Here. We actually don't want to install the offline mode in development because that makes development a little tricky. And so I'm not going to show you or belabor you with the code to do this but this is what you do, process.env.NODE_ENV === 'production'. So this is something that you would normally do in Node because Node has processing via NODE_ENV.

[00:06:32] But you normally wouldn't do this in the browser. But we have this cool defined plugin thing that comes from webpack. Where you can say hey, webpack, any time you come across something that is processed.env, I want you to replace that with this object that has a NODE_ENV property.

[00:06:51] And that NODE_ENV property will be this value. And so you provide that value as a string and it will just take whatever you put in that string and plop it in its place. So what that will do is it will basically say. So originally your code will look like this, your source code will look like this, it will say okay this is NODE_ENV.

[00:07:12] So I'm in production mode and so I'm going to say okay "production" === 'production' then it will actually evaluate that even further. Well I think Uglify will evaluate this to true. And then it will actually get rid of the statement altogether because that's always true, right? And so it will just say okay, offlineInstall.

[00:07:30] But alternatively this will be development and that will evaluate to false, and then Uglify will remove that code. It's dead code because you can never reach that code. Yeah, so I'm actually just to not have to type all that I'm gonna go here. And we'll check that out.

[00:07:50] And then I'm going to run build.
>> [SOUND]
>> Kent C Dodds: And Service Worker like I said requires HTTPS unless you're serving from local hosts. Thank the browser overlords for doing that because developing with local hosts as HTTPS is a real pain in the rear. So now if we run npm start it will start up our HTTP server on dist.

[00:08:24] Where did my browser go? We'll run that, or I refreshed the browser, you couldn't tell. But now we have that Service Worker installed and if we go to Application > Service Worker. And I'm actually not, well I guess you have this Offline button, but I don't really trust it, because I'm not actually offline, so yeah.

[00:08:51] But it says that it's working somehow, so, I don't know. But what's gonna be cool is in this next step when y'all push your own version of this app to a production thing and then you turn off your Wi-Fi and it's still running. That's what's gonna be cool and that's what we're doing next.

[00:09:06] But before I go into that I would like to open it up for questions because I've been talking a lot.
>> Kent C Dodds: You're sitting here like, well this is heaven or this is scary or a little of both.
>> Off Camera 1: Part of it is, web workers it's, where do these even work?

[00:09:25]
>> Kent C Dodds: Yeah.
>> Off Camera 1: You know, Chrome and-
>> Kent C Dodds: Well Service Worker.
>> Off Camera 1: Service Worker.
>> Kent C Dodds: Yeah, Service Worker, that's a good question. Service worker or browser support.
>> Kent C Dodds: I'm fairly certain it's not just Chrome. I think Edge supports Service Worker. I'm pretty sure Firefox supports Service Worker. Yeah, so you got Firefox and Chrome, Opera, Android browser, Chrome for Android.

[00:09:59] Looks like you're still hurting for Safari forever. Safari is the new IE and looks like Edge doesn't have it quite yet either. But yeah, this is a cool thing that users using modern browsers can leverage.
>> Off Camer 2: And it won't blow up on those other ones.
>> Kent C Dodds: Right, yeah, the offline install actually what it's doing is it says if service, now I can't remember what it's called, the API, but it'll check for the API in navigation.

[00:10:29] Yeah?
>> Off Camera 1: He's asking if, aren't there issues with when the chunk cache changes, as far as I know updating Service Worker and making the browser use the new worker is not trivial.
>> Kent C Dodds: Yeah, so that's the beauty of using these plugins that are so powerful is the plugin actually doesn't use the chunk cache thing so the browser will have to go get the Service Worker every time.

[00:10:53] But that doesn't prevent it from actually loading the app, so if it is online, it's gonna load the app fast and then it will load the Service Worker and the Service Worker will cache everything. Yeah, the cool part of this Service Worker cache thing that I wanted to.

[00:11:08] Well no, I'll talk about that in a little bit when we deploy our apps. But yeah, you don't ever really need to worry about the Service Worker not being updated because the browser will always check for the Service Worker if it's online.
>> Kent C Dodds: Yeah?
>> Off Camer 2: There is one more at the end there-

[00:11:26]
>> Kent C Dodds: Yeah.
>> Off Camer 2: Is it automagically going to update files that changed on each deployment?
>> Kent C Dodds: Yes it will do that. And, yeah, so that answers Billy's question, as well. It will automagically update the hashes as well. It will update all the resources on every build. That's part of what it has in that sw.js file.

[00:11:48] It has that mapping of all the assets. And so then when the user loads that Service Worker file it'll say okay, here are a bunch of new things and those new things will actually be in the index HTML as well. And the Service Worker, well the script will tell the Service Worker hey all of these things aren't part of my assets anymore.

[00:12:10] You can clear that cache and here I have a new or that part of the cache and I have a new asset for you.
>> Kent C Dodds: Any other questions? Sweet, there's probably not very many apps I wouldn't do this on.