Check out a free preview of the full Exploring Service Workers course:
The "Introduction" Lesson is part of the full, Exploring Service Workers course featured in this preview video. Here's what you'd learn in this lesson:

Kyle Simpson introduces the course on service workers by sharing a few helpful resources and then describing the problems that can be solved with service workers.

Get Unlimited Access Now

Transcript from the "Introduction" Lesson

[00:00:00]
>> Kyle Simpson: My name's Kyle Simpson, everybody knows me online as, Getify. If you don't follow me on Twitter, or on my Gmail, or anywhere else online, you can find me as Getify and I'll love to hear any thoughts or feedback or questions that you may have. This particular workshop topic, is much more out of my normal wheelhouse.

[00:00:22] Any of you that have seen me teach before, the many workshops I have here on Frontend Masters, I'm all about teaching the core JavaScript language, or maybe like patterns in JavaScript. Like functional programming or things like that, and I don't often venture into the Frontend programming world. I don't venture much beyond, for example, NodeJS, so, this will be a fun and exciting exercise.

[00:00:48] I basically begged the Frontend Masters people, to let me come and teach this, because it's something that I'm super interested in. But it's not something that I'm necessarily really an expert at, it's kind of a newer thing that I'm learning. And there are a lot of people, maybe even some of you, that have more experience with this stuff, than I do.

[00:01:07] But probably last summer, is when I really got interested in the topic of service workers, in particular. So that's what we're gonna be focusing on today, is service workers and how we write them. What they are for and how we write them, how we position them within a website in particular.

[00:01:25] And I say, website on purpose, because most of the other materials that are out there that talk about service workers, seem to focus on progressive web apps. And I just wanna give a quick note about progressive web apps. That's how I actually first started experiencing them, last summer, I decided I wanted to build myself a progressive web app, to install on my phone.

[00:01:49] It's a little app, that lets you take notes when you're at a restaurant and then be reminded when you come back to that restaurant. And I wanted to build that app for myself and I wanted to do it with web technology. I don't wanna go learn Java, or whatever you use on iOS these days, I can't keep up with it.

[00:02:04] But I didn't wanna learn any of that, I just wanted to use the good old web technologies that I knew. And so I did dive in for the first time, to service workers and try to figure out how they work. And I was doing exactly what any of you have done, if you have tried, which is just randomly googling around saying, somebody tell me what this is.

[00:02:25] I do wanna point out, I've got in the links here, I found about halfway through that journey, that one of my favorite people on the Internet Jeremy Keith had written a book called, Going Offline. And this is an absolutely fantastic book, so, please go buy that book. It's one of the best resources I've found for trying to sift through this stuff.

[00:02:44] But there's still just lots and lots of bits and pieces, incomplete information. There's lots of reference on MDN, there's lots of write ups that Google has done about it. But trying to piece together, all of these things, is a very manual process. And literally the code that we'll be going through today, was done exactly that way.

[00:03:02] I set out with, here's what I kinda wanna build and I know the pieces, but I'm gonna have to fiddle with it. And I spend a lot of time fiddling with it, and trying it and trying it over and over and over again. So, I certainly am not at the place where I can just write this stuff perfectly from scratch, and I don't think that's even reasonable to do.

[00:03:21] A couple of things to point out, there are in here, a couple of resources that you should know about, in particular this one on work box. That is a framework for writing service workers, so it's a library framework thing that you load into your service worker. It has a variety of APIs for declaratively setting stuff up.

[00:03:44] I think it's a great idea to have something like this, because, quite frankly, many of you are probably gonna get pretty intimidated pretty quick, when you see just how much code we're gonna be writing. I'm actually excited by writing, by being able to write my own code in a service worker.

[00:04:00] So I went the opposite direction, instead of using a framework or library, I really wanted to have all of that fine grained control and with that control, comes an understanding of things. And I really wanted to understand, what was possible, what I could do. And there's a lot of things that are possible, that don't even get talked about and we'll kind of cover those various things as we go along.

[00:04:21] But, I certainly understand that, if you are trying to get something shipped at work, you don't have a lot of time to just, green field explore. And that would be, a really great starting point, to get a service worker up and going, that would be a really great starting point for.

[00:04:39] So, back to what I was saying a moment ago, about the idea of sites versus applications. Everybody seems to think about it in terms of apps, that's where I started learning and building was with apps. But, I am gonna talk to you today, about using service workers with everything that's not a web application.

[00:05:00] Because I think, well, one of the things that we have missed on the web, and by missed, I mean, I think we didn't realize how important this was a long, long time ago. If we'd realized a long, long time ago how important this problem is, I think we would've had something like service workers, a decade or two ago.

[00:05:21] And I'm not even sure whether the technology platform was mature enough for that. But it would have been a problem that we had been trying to solve a lot earlier. And it feels relatively, not that solved, and so when you hear people talk about service workers, they immediately think, well, I'm not building an app, so, I don't need them.

[00:05:39] And the claim that I'm going to make and I'm hoping to enable, at least, from a creative thinking perspective, all of you that are watching this to do is, I'm gonna make the claim that literally, every single website on the internet needs a service worker. Every single website, I mean the static, one pager, that somebody wrote 20 years ago.

[00:06:05] And I mean, the fancy, Gmails of the world, and I mean everything in between, I think they all need a service worker. And I think that, as we are moving into this age of taking advantage of the web platform, we get focused on the shiny stuff, like, I got CSS Grid, or I got this, and now I have these, like progressive retina images.

[00:06:30] And I've got all these crazy web fonts, and I've got SVG and I've got animations. We get focused, and rightly so, those are fun and exciting things, we get focused on the shiny stuff. But I think we forget some of the most important base plumbing fundamentals of the web.

[00:06:46] And I think the web got it wrong, web and, by web I mean broadly, the browser technology, I think we got something wrong. And service workers, at least the way that I've positioned in my mind, they go to trying to fix that. The thing that I'm talking about, is that, we have always had some notion of information being cached in our browsers.

[00:07:09] And we often think of, well, because I have it cached, it means I don't have to reload it the next time I go to the website. That's unfortunately, not really the case. If you were to dig into the source code of a browser, and look at all of the different paths that it goes through, to decide when it sees a request, whether or not to try to load it from cache, to even look in the cache, or load it from cache versus getting it from a server, or what it does.

[00:07:38] You'd probably be blown away, at just how complex that is. It's not a binary decision like, it's in the cache, I use it, or it's not in the cache, and I don't. And I think that's one of the problems that we have, is that we've so simplistically cemented in our mind, something so uninteresting as caching, that we just think the browser takes care of that for me.

[00:07:57] In our interest this morning, many of you talked about being all over the world, and all these different places. I travel for work, I'm all over the place and just a few days, I'll be in Lithuania, and then I'll be in other parts abroad. And that means I spend most of my time, not on my home WiFi or in my nice United States of America, high speed, WiFi connection, sort of stuff.

[00:08:21] I use T-Mobile was my mobile provider, and that means that I get, free internet everywhere I go. But it's at 2G speeds, so that's the downside of it, and I can pay like $50 a month to upgrade it to 4G. But I'm cheap like that, I don't normally do that, unless I'm gonna be somewhere for a long time.

[00:08:43] A few weeks in Australia, yeah, I'm gonna pay to upgrade, but if it's a few days, I just suffer through the 2G experiences, of the web. And so, maybe more than most, I get to see firsthand, what it's like when we build, not only slow experiences, but basically broken experiences for people.

[00:09:02] And we get so myopically focused on, well, my boss and my sales and marketing departments, tell me that all of our customers have high speed Internet and they access us at home, on a desktop computer, with a high end monitor and stuff like that. We get so focused on that's for our customers that we forget, the fact that customers are mobile.

[00:09:24] This is one of the things I think that we've missed. We forget the fact, that I can be your customer here in the United States of America, and I can load up your website, and I can be thinking, I wanna buy something from you or pay for a service.

[00:09:37] And then, in the middle of that decision, get on a plane and fly to Lithuania or some other bizarre, far off, exotic place, wherever. And I get off the plane and I connect to my 2G speeds and I'm still your customer. And I still want to experience the web exactly like I did before, and guess what, I'm willing to tolerate the idea that it's not gonna be as perfect as it was back home.

[00:10:04] But there's a difference between I'm willing to tolerate a degraded experience, and I'm willing to just essentially assume, I get nothing. I literally get nothing because nothing will load. For example, many, many times, I'll be sitting in an airport, bored, waiting to get on the plane, and I'll see a tweet that comes by, with a blog post and it looks interesting, so I click on the blog post.

[00:10:27] I start reading the first two paragraphs and then they board us on the plane. So I go put the phone in my pocket, I get on the plane, I'm in the middle of that blog post I'm still reading it. I want to see what that blog post has to say.

[00:10:39] I go get on the plane, we turn our phones into airplane mode, I’m thirty thousand feet in the air, there is no WiFi on this stupid plane. And I open up your blog page, and I get a blank white, failed to load screen. Why is it that I had that content, before I took off, and I didn't do anything, it’s navigated around and went to a whole different website.

[00:11:02] It's still an open tab in my mobile browser, but I get on the plane, and it's gone. And there's actually a thousand different reasons why that I might have happened. The website might have had dynamic resources in the background, that tried to make a request, and that might have been why it happened.

[00:11:19] It's actually, probably an ad that messed it up, that did that to my site. But whatever the reason is, now I don't have your blog post and for the next three hours, I cannot read what I wanted to read. I think that's what we've missed about the web, is that we've made these terrible assumptions, that people are gonna experience the web, in a contiguous way.

[00:11:42] That when you sit down to experience something about the web, you're not gonna be interrupted. You're gonna have perfect WiFi, perfect Internet connectivity, perfect battery power. You're never going to have any sort of interruption to that, that's the way that we design the web. And the reality is that, that's not the way the web is experienced, by the vast majority of the human population.

[00:12:04] It's a very vanishingly small amount of us, that get to have the privilege of experiencing this continuous perfect web, all the time. And it's, like such a first world privilege problem when we're like, my God, GitHub took four seconds to load, what are they doing? All right, like, but that's a reality, for a lot more of the world, than I think we understand.