Progressive Web Applications and Offline Introducing Web Workers
This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Introducing Web Workers" Lesson
>> Mike North: Now that we've had a little refresher on promises, we're going to put them to work in combination with something that is really powerful idea, right? It's been around since i11, but it is widely underutilized. So if promises are overutilized and you see promises everywhere, even in places where it is potentially not necessary to use them.
[00:01:15] You can think of that as almost like, I've set an alarm, I've set a timer and it's gonna go off in a couple minutes. Or I've,
>> Mike North: Ordered something on the phone and it'll come later. But at any given time, you're only one person kicking off all of these things and then handling them when they complete.
>> Speaker 2: Two or n, like?
>> Mike North: n.
>> Speaker 2: Okay.
>> Mike North: When you solve the problem and you can get two, you can get N.
[00:01:59] So moving from one to two is the big idea here, or one to n, as you readily point out. So we basically create a worker using this worker constructor you see here, right? And the single argument that we pass to it is the path where a script can be found, and this could be a URL, the script could be it is yet to be downloaded.
[00:02:23] But it is sort of a self-contained world in it and of itself. And this is good because you want to have sort of pretty rigid walls in between these different things that are running. For example, you can't really share scope in between these without going through a little explicit passing of information back and forth.
[00:02:44] When you create a worker, you can send messages to it, and that worker can send messages back to whatever created it. And in this case, we're talking about a dedicated worker. We will add some nuance to the problem in a moment. So this is what your application would look like if you're creating a worker.
[00:03:02] Now, if we take a look at what might happen inside worker JS, on the right side of the screen, for completeness, that first line is just, we're getting a log function that is doing our console logging. So I've made this a complete example, but that's not meaningful here.
[00:03:21] And you can see that we have a self.onmessage that we're defining, and we set the value of onmessage to a function. And this function will be called whenever the host application sends something to the worker via postMessage. So we send it an object and it's going to retrieve.
[00:03:40] So the onmessage function will be called with an event, just like if you've ever hooked up to an input, an HTML input, you can usually find that there's this event that represents some additional meta information. And on that event, you can usually find the data of interest, something that has changed.
[00:04:02] So in this case, you'll get a single argument in onmessage, and you'll just gonna wanna pluck the data attribute off of that, and you'll get that object. And we're gonna console log fit like, as the worker, I have received this data, and in Chrome and in modern browsers, this will be mixed together with your host applications log.
[00:04:23] You'll see it all there together. You may see a little gear next to it, and that represents that this came from a worker. I will demonstrate how this works as we spin up to the first exercise here. So then within this worker, we're going to kick off this function doWork.
[00:04:46] And the important thing I want you to see is that we're using setTimeout, which is available to us inside the scope of this worker. And in two seconds, we're gonna take the string that we were passed, and we're gonna uppercase it, and then we're gonna send it back to the parent.
[00:05:04] And the parent is going to receive it on the onmessage function here. So this is a little clunky, we wish that this was written with a promise-based API or even a true callback-based API. And you can see here, we are assigning function values to special property names, this seems very old to do it this way.
[00:05:29] And the reason is the standard was invented in 2010, 2009, and promises were a thing, it was like a jQuery feature or a Dojo feature, and it was not part of the standard. So it's not all that refined, but it is still really powerful idea here. And the power here has to do with the fact that although computers are getting faster year over year, if you've ever heard of this concept of Moore's law.
[00:06:40] And it's really important that, as a programming language, to stay relevant, we learn to take advantage of all that unused capacity.