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

Steve walks through the solution to Challenge 13.

Get Unlimited Access Now

Transcript from the "Challenge 13: Solution" Lesson

[00:00:00]
>> Steve Kinney: So let's just hop into the solution for this. We'll bring this over, go into our service worker,
>> Steve Kinney: Call it,
>> Steve Kinney: All right,
>> Steve Kinney: So when it gets pushed, we have this textData text which is coming in. And if that textData is TERMINATE, well, we have an action in place here, but if it's not, we might do some other things, right?

[00:00:32] If it's TERMINATE, we'll do it, and we will end. So this gives us an opportunity, what other push notifications do we have? Depending on your application, it could be a whole bunch of different kinds, right? For instance, in Chrome on my computer, Google Calendar will send me a notification for one of my many, many meetings, and I'll get notified of those.

[00:00:52] I don't have to have Google Calendar open in order to see those, cuz that would defeat the purpose having a notification if I'm looking at the calendar, right? In this case, it will receive those and I will see it on the screen. So in this case we have this event, and the event has some data, and let's get the data from there, and we'll console log it.

[00:01:22]
>> Steve Kinney: Cool, and let's go ahead and start by console logging it for now.
>> Steve Kinney: And let's just head back over to our application.
>> Steve Kinney: Let's get results 50, 50 here. All right, Frontend grocers, we'll go ahead and we'll put something in the cart, give myself a console in here

[00:01:50]
>> Steve Kinney: All right, let's see.
>> Steve Kinney: Let's check this, am I online?
>> Steve Kinney: Server is up.
>> Steve Kinney: Cool.
>> Steve Kinney: All right, that's the thing about these progressive web apps, it's hard to tell when the server's not up because your app works offline. All right, so we'll add that in.

[00:02:26]
>> Steve Kinney: Put some bread in there, and let's just order some bread.
>> Steve Kinney: Cool, so it's been complete, and we get this notification object. Now, this isn't doing us a lot of good. Right, it's great to have it in the console, because we all know that as soon as you order some groceries, the first thing you do is you check the console, right?

[00:02:43] That's what my mother does when she does it. It's obviously a tried and true user interface pattern. No, that's not good enough for us. What we're gonna do is we're going to send them a notification alerting them that their order has been placed. So what we'll do is again, we'll see,

[00:03:05]
>> Steve Kinney: if ('notification',
>> Steve Kinney: If we have a notification property, right? Let's not do anything in here,
>> Steve Kinney: In the jsonData. All right, so if there is an event.notification, let's just pull that out using destructuring.
>> Steve Kinney: We'll have access to that, and then where were we? self.registration,
>> Steve Kinney: .shownotification.

[00:03:42]
>> Steve Kinney: And that takes the two arguments, and we got a little bit of help from Visual Studio code in this case, where it takes the title and the notification options. So what we'll do is we will pass in the notification.title and the second option will just be a body for now, I'll just give it a body and an image with it.

[00:04:01] Which will be the body of the notification, right? We can see if we look right here what we have to work with. We have a title and we have a body.
>> Steve Kinney: And we can also display an icon. So for the https we have, remember this is a progressive web app.

[00:04:18] We created icons that were gonna go on the home screen, right? We can use those same icons in the notifications so that the user can see. Cuz on Chrome on the desktop they're actually gonna see the Chrome icon and that will be off to the side, this let's them know that it's us, we're saying hi, cool.

[00:04:36]
>> Steve Kinney: Localhost:3100,
>> Steve Kinney: /launcher-icon-4x,
>> Steve Kinney: Awesome, so that will update our app,
>> Steve Kinney: This will be our event data.
>> Steve Kinney: Cool,
>> Steve Kinney: And we'll add, what do I wanna do? Some unsweetened organic almond milk? Throw that in there, and I'm going to CHECKOUT.
>> Steve Kinney: I'm just gonna close that.

[00:05:25]
>> Steve Kinney: Look at that. Even with the window closed, I just got a notification saying my order was placed. It's almost like I installed an app in my browser and it was able to listen for things when I didn’t have a client connected to it, right, really cool. Again, this is creating that feel of a native experience but getting all the great parts of the web where you can just get the things that have changed in cache.

[00:05:50] You don’t have to download a new app every time, right, it’s kind of like you get to have your cake and eat it too. I do wanna show you something slightly more advanced that we'll just kind of look at in the code.
>> Steve Kinney: Which is you can put a click [INAUDIBLE] so when the notifications click, and that is for all service workers, you install it the same as fetch, or install, or activate.

[00:06:18] You say service worker, when someone clicks on one of my notifications this is what I want you to do. And the notification that they actually clicked will be, in this case again, event.notification. And so we'll have a tag on it, but we can close it, we can also see hey, do they have any windows from us open?

[00:06:37] If so go ahead and just use one of those windows, we don't need to open a brand new one, right? So we can do very interesting things, and again, there's that extensibility. We can go ahead and figure out our surroundings. It's not like hey, this is the default behavior.

[00:06:51] Take it, you have all of JavaScript behind you and the ability to kind of figure out what's going on in the browser.