Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 12: Web Push" 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:

In this challenge, students generate a web push subscription.

Get Unlimited Access Now

Transcript from the "Challenge 12: Web Push" Lesson

[00:00:00]
>> Mike North: Let's see if we can make this exercise work. We already, in the back-end, it's a very rudimentary setup. But when you check out, when you complete an order, after about ten seconds, you'll get a notification that your grocer has started to shop, and started to pick your order up, right?

[00:00:20] So currently what's happening is it's gonna go into the database, look for all of the push subscriptions, and it's gonna send a notification to each of them. Currently there's nothing in this table so it's iterating over an empty list and nothing happens. So, we want to add a record to this table, and we can do so through the API, in your apiplayround.http, there's an example of sending this request.

[00:00:45] Once you send that request over, now when you check out, you should get a push notification. And you're going to want to, in your service worker, just your SWJS file, you're gonna wanna add an event listener like this, you could just start with a debugger in there, and you should receive some data that represents what looks like a little notification.

[00:01:08] So, I'm going to do this exercise a little bit differently when I solve it, I will definitely stop and show that we can get this notification here. There is one last service worker lesson I wanna make sure that I teach you before I pass the ball back to Steve, and that is the idea of having a kill switch, right?

[00:01:29] So, has anyone today like been fooled a little by their service worker? Maybe you have [LAUGH], yes, Steve right now all day. But these things can go wrong sometimes and they're doing very critical things, and if they make mistakes things can be bad. It's a good idea to have like the ability to receive a push or some mechanism by which the service worker basically unregisters itself, it uninstalls itself.

[00:02:01] So that you're not on the phone with some user trying to tell them to open up Dev Tools and click links and things like this. This is a way remotely get back to non-progressive mode, and start from scratch, start clean. So, in this case, I'm gonna activate this killswitch by way of a web push, and I'm gonna send just the string TERMINATE in all caps.

[00:02:24] And I want when we get a message that looks like that, for us to just call self.registration.unregister. That's the equivalent of clicking the unregister link in your service worker tab, so we'll have the means of doing that. The one last thing I wanna show you it's the method that I would use to fire that switch.

[00:02:50] So, this web push library is excellent and it provides us on the CLI the ability to send a message without going through our app. This is nice because I could terminate a service worker without having to deploy. All right, I don't have to interact with my application, just with the data itself, with the application itself, with the keys, with the vapid keys.

[00:03:12] I can send something that looks like this, and the browser will get it. It's just a matter of having all of the right data. So you could obviously make this a lot nicer and maybe have a little script that would talk to your database, and by user ID terminate their service worker, and inside it would be assembling all of this stuff here.

[00:03:32] But I just want you to know that this is a nice flexible thing. And that having an off button on your service you can use to remotely take a harmful one out, is a good idea. Not necessarily to destroy the cache, but to set it back to unregistered so it re-installs itself.

[00:03:52] All right, so with that, let's try to create a push subscription. And then in our service worker, setup something that listens for the push event, verify that we can see this stuff coming in. And I'm gonna go through and implement the kill switch when we come back in about 20 minutes.