Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 12: Solution" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Mike walks through the solution to Challenge 12 and takes questions from students.

Get Unlimited Access Now

Transcript from the "Challenge 12: Solution" Lesson

>> Mike North: So looking at the code, the first thing that we're going to need to do is, we could either look to the place where I've told you you could find your vapid keys, which is in the private folder, at this vapid.json file. Or you could import this as a JavaScript module, and that's actually how we're going to go about doing this.

[00:00:23] So we typically wanna ask for permissions to send the users push messages at around the same place we're registering the service worker. In this case, it's in app.jsx. We can import the the VAPID keys just like this.
>> Mike North: So you can import JSON files just like you can import JavaScript files.

[00:00:52] So now that object has on it the private and public key.
>> Mike North: And we can then, the next thing we need is this function that I handed you for free, no charge.
>> Speaker 2: [LAUGH]
>> Mike North: The one that converts the base 64 string into an integer array.
>> Mike North: Let me just find that real quick.

>> Mike North: There we go.
>> Mike North: So we're gonna add that down here, or no, I think index.js is where we're doing our service order stuff. There we go, perfect. So we'll add that function here. We can get rid of this VAPID import, and put it here.
>> Mike North: We've already got one.

[00:01:53] And now, we have to kinda deal with our service worker registration here. So we've got it here, it's been unused this whole time, and now we can finally do something with it. So we're gonna say return registration.pushManager.subscribe, and we'll pass in subscribeOptions, then we'll flesh that object out in a moment.

[00:02:23] Just put it up here for the time being, let subscribeOptions = empty object, and this thing returns a promise-
>> Mike North: Which resolves to a pushSubscription.
>> Mike North: And what we wanna do with that subscription is send it to our API. So we're gonna return a fetch to the API end point that we have in the example here.

>> Mike North: This is gonna be a post, and we need to pass our JSON content type header along with it.
>> Mike North: Okay, and so now this fetch should succeed, we need the body, of course.
>> Mike North: And we don't need to wrap this object in that data key as with the other requests.

[00:03:29] This one, we can just pass straight through. And once this fetch is complete, we should be good to go. So let's see if this works. We're going to stop our API and restart it.
>> Mike North: And we should see, when our UI starts, a new record being created.
>> Mike North: Let's see what's going on here.

>> Mike North: Interesting.
>> Mike North: I don't think I touched that kind of file. Let's see. Do not touch a CSS file.
>> Mike North: Let me just try cleaning my build and starting over.
>> Mike North: Let's just look at this real carefully. It's a semicolon.
>> Speaker 2: [LAUGH]
>> Mike North: Good old webpack, that is not useful feedback.

>> Speaker 2: [LAUGH]
>> Mike North: Sorry, Sean. So now, we should, when the new service worker takes control, let me make sure that I've got my notification permissions turned off. Cuz last night, I was going through this, and it probably still held the old state here. Let's see, we're not using this URL to base 64 array.

[00:05:10] Let me make sure I use that properly, we need our subscribe options, that's the last thing. So here, user visible only, true, and then we've got application server key and the value of that is the url to bay 64.
>> Mike North: Array, and we're gonna pass in VAPID.publicKey.
>> Mike North: There we go, it is asking us, do we have permission to give you notifications?

[00:05:50] So I'm just gonna clear this out here.
>> Mike North: Clear, allow, okay, and we just persisted this thing here. So we've now got a course subscription. What I'm gonna do with that is I just wanna save it for later. I'm ready to open up another text editor just, or I can just do another tab.

>> Mike North: Because I want some of those values there for manually sending a message. And I'm gonna go to my service worker now and implement a push handler.
>> Mike North: Do it right above fetch.
>> Mike North: addEventListener, push, and that's gonna receive an event. That's a push event, it's a little bit different.

[00:06:47] And for now-
>> Mike North: We'll grab the data property off of it.
>> Mike North: And we're just gonna console.log(data.text).
>> Mike North: We'll see what happens. So in our service worker tools here-
>> Mike North: In the application tab, we've got a button that we haven't really been pressing, and it is the push button, so this emulates a push event.

[00:07:19] So I should be able to hit this three times. Go to My Console, and you can see three times I got this message. So that's a great way of simulating that things are working the way that you expect them to work. Now, let's make something here that's like textData = data.text if text data equals terminate, we'll add our service worker kill switch here.

[00:07:52] They don't really care about the promise. We're not really waiting for anything. We're just saying go away, service worker.
>> Mike North: All right, so now, I'm just gonna keep this application tab open so we can see what's going on. And I'm gonna carefully build that little command that we were looking at before.

[00:08:19] So here, well, let's just start with the cheat sheet, here's my command. And the first thing I need is an endpoint, and that's part of this push subscription object, here it is.
>> Mike North: Grab the whole thing.
>> Mike North: So there's the endpoint.
>> Mike North: And then we need a key and an auth.

[00:08:51] So this is generally the key, and this describes an elliptical curve encryption key generation algorithm here. It's just, if you're used to JSON Web Tokens, maybe you've seen that before. And then we get the auth value. And there's our payload, we'll leave that alone, we'll leave this alone, and then we'll just need the VAPID stuff.

[00:09:16] Grab that here. There's the public key.
>> Mike North: And the private one. And by the time you watch this video, this will be a useless key, before you try to get fresh with my push notifications.
>> Mike North: So we should be able to run this command, and what I expect, if you look carefully, on the right side, I expect all of those links there to go grayed out, indicating that the service worker is unregistered.

[00:09:47] So let's run it here.
>> Mike North: What went wrong? I need to change one little thing here, mail two, and then it should work. Needs to be a url, a mail two url, there we go, they just grayed out. I have programatically killed my service worker. This is something you could do, remotely you could do it for all of your users if you have a widespread problem, kick yourself out of progressive web mode and fall back.

[00:10:19] So, a very useful tool to use. And with that, I wanna push this up, and then Steve is gonna take over and start talking about how we can take what we’ve built here and kind of use it to show users notifications even when our browser tab isn't open.

>> Speaker 2: One question.
>> Mike North: Yes?
>> Speaker 2: In the registration process, you sent an EPI to the 3100 EPI subscription or whatever push subscription. What was that for?
>> Mike North: So If we think about the flow again, the-
>> Mike North: Our back end, like we need to store these subscriptions. Those subscriptions are means of directing a piece of data to a particular user.

[00:11:05] Think of it like a GUID or an IMEI if you're used to mobile devices. That represents a particular browser on a particular user's machine, and without that, we have no way of routing that message to the correct place. So we just persisted it in our database. You might have in your data structures, you could have a user account has many push credentials and one might be their Firefox, one would be their Chrome.

[00:11:33] And you could iterate over all of them and send a message simultaneously to whatever. So your back end needs that is the important thing. The front end requests it. But once it has it, you've got to send it to some server so that the server can use it to push something to the client.

>> Speaker 2: Okay, but in this scenario, the back end was not sending actually any push event to the push service. Rather, we use, we did that from command line.
>> Mike North: Correct. So.
>> Speaker 2: To notify ourselves.
>> Mike North: Without spoiling too much, let me do something else here. I'm gonna set a quick little break point.

[00:12:08] And we've got a push listener here. I'm gonna just set one there, and I'm gonna check out.
>> Mike North: Come on now.
>> Mike North: Check out.
>> Mike North: Yes.
>> Mike North: So, you should see notifications coming through.
>> Mike North: Right, am I in do not disturb again? God damn it.
>> Mike North: One last little hack, only cuz Steve will need this for the next section, I wanna make sure that it works.

>> Mike North: Unserve.
>> Mike North: That would be the problem. I had two of these running.
>> Mike North: Check out, yes.
>> Mike North: I'm not sure why this break point's not been hit. Is it possible that, yeah, I changed the service for a code. And it wasn't stopping there.
>> Mike North: Let me kill the service worker, restart it, make sure that it works.

>> Mike North: Clear this.
>> Mike North: Check out, yes.
>> Mike North: It doesn't seem to be working.
>> Mike North: So the idea is we should be able to send these notifications. I think I can just take away the VAPID stuff and it should work. There, that will do it.
>> Mike North: Now it will definitely work, I wasn't using the VAPID key on the server side.

[00:14:46] I must have pulled down my own changes there. So now checkout, yes.
>> Mike North: There we go. So now we've got this data. Here's the push message data. This originated from our API as a result of checking out, and it is using the exact same library, just not the CLI utility for it, but same core mechanism.