Check out a free preview of the full Progressive Web Applications and Offline course:
The "Introducing Notifications" 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 reviews Notifications including how to approach implementing notifications including options for the user's visual and behavioral interactions.

Get Unlimited Access Now

Transcript from the "Introducing Notifications" Lesson

[00:00:00]
>> Steve Kinney: So Mike just covered how to push notifications from the server to the client. Now, this is really useful for doing a lot of things. You could update data and IndexedDB database. You could terminate a service worker. But occasionally you're going to want to actually show the user something that happened.

[00:00:17] And this again, is something that we take for granted in native apps. Whether we take for granted every time I look at my phone, that there's like a wall of different notifications from seven different apps. Turns out that we can also participate in this inside of the browser.

[00:00:35]
>> Steve Kinney: But as Mike covered earlier, we do need permission, right? If the user does not grant us permission, then we can’t send them any kind of notification. This is true of native as well, the user has to give us permission, and the interesting part is if a user denies us permission, then we're denied forever.

[00:00:58] And this is slightly problematic, this is why sometimes you'll see a not real notification first. Like hey, wouldn't it be great to get this notifications and then if you hit yeah, would be, then you get prompted. That is a situation where they don't want to show you the browser's request permission because if that were to happen and you said, no, they are shut out forever.

[00:01:20] So, the notification permission is in one of three states. Default, which is you haven't been asked yet. Granted, which means you have turned on the fire host and you already started receiving notifications. And denied, which means you've turned them off forever. You can check that later using Notification.permission to see what permission you actually have.

[00:01:43] So again, in the same way we checked does service worker exist in this situation, we can do the exact same thing by checking notification permissions and see where we are. So, one thing you might choose to do is see if it's default, then go ahead and try to show them the fun pop up and then show them the real one.

[00:02:00] This is what it looks like, this is on this page, if they hit the x, they actually stay in default at this point. They have not officially said block. They haven't said allow, but they haven't said block either, and this will allow you another attempt. Now, most users don't know that little x exists and they are most likely to block you if they don't wanna see those notifications.

[00:02:24] You can also see that Notification.requestPermission returned a promise
>> Steve Kinney: Cool, like everything else, we wanna use progressive enhancement. Our code will theoretically throw an exception if there is no notification object in the window object. If we try to call requestPermission or any of those properties, that will blow up.

[00:02:43] So we do the same thing we do with service worker, we check to see if the notification object is in the window.
>> Steve Kinney: If it is and we haven't asked for permission yet, so we're default, then we go ahead ask for permission. If we've gotten that permission, then creating a notification is relatively straightforward.

[00:03:06] We create a new notification. And again, this is where that checking on the first line to see if notification exists is really useful. With that notification we can give it a title, which is the first argument is that string. The second argument, which we'll take a look at in a second, is a object of options.

[00:03:25] Not dissimilar from some of the other APIs that we've looked at over the course of the day. In this case, we're setting the body, which you can kinda think of as the subtitle of the notification. We can also include an icon. And when we go over the options, different options are supported by different operating systems.

[00:03:42] This includes mobile as well as desktop browsers.
>> Steve Kinney: If we've been denied, then we can do other obnoxious stuff. Don't do this, nobody will like you if you do this, thank you. That's my public service announcement for the day. We can also trigger notifications from service workers. All right, this means that when something happens in the background, if that browser tab isn't open, you can still trigger a notification.

[00:04:12] But the syntax is a little bit different. If you just say new notification, the user will never see that notification. The syntax from doing it from a service worker is to get the service worker's registration and trigger the show notification method. And that takes all of the same options as new notification does, but you do need to find that registered service worker and trigger it through that method.

[00:04:38]
>> Steve Kinney: Yeah, I don't know, I don't make the rules. Cool, so, notifications, two arguments. A single string for the title and that object full of options. We can kinda think about the options broke apart in three different sections. Which is the visual options, like is there an icon, what is the body of it?

[00:04:57] Behavioral options, like what happens when the user starts to interact with it? And other kind of informational options that we'll take a look at. So the visual options. We have the body, which we saw in the icon, which is a small image that'll go along with it. Other operating systems, you can do a larger image.

[00:05:15] This would be, if you had an OS that supported a notification where the image was the notification. You wanna notify them about a new Instagram picture or something like that. I think that this is primarily supported on Chrome OS, so some of these are very specific. The normal ones you're going to use are body and icon.

[00:05:32] Vibrate, that is mobile specific, my laptop as far as I know does not vibrate. Sound, you can attribute a sound with it. And direction, left to right or right to left for different languages. By default it's auto, which is probably what you want in this case. The behavioral options, these are kinda interesting.

[00:05:50] So you have a tag, the tag is what kind of notification it is. Right, this way, let's say you're sending a notification for every 10% of upload progress. You probably don't wanna send ten of those. So the tag is the type of notification so they can be grouped by operating systems that support grouping.

[00:06:09] Data is literally any object that you wanna include. This could be important information that you wanna handle on a click, or anything along those lines. When we trigger notification on the MacOS or Windows, you'll see that automatically goes away. RequireInteraction, it will stick around until the user interacts with it.

[00:06:31] Renotify will actually show back up, this is mobile only. And silent, it'll be silent. So talking about notifications is kind of hard to capture in slides, and it's also fairly boring to talk about in slides. So what we'll do is we'll play around with them in a little contrive safe space for a second.

[00:06:52] So this is a little glitch called notify the authorities.
>> Steve Kinney: And loading it, cool.
>> Steve Kinney: And so you see the first thing, I am prompted to allow, so we will allow notifications. And we can see that thanks for granting permission, we promise not to abuse it. Cool, the other thing we can do is we say, show me an image, and this is literally just something to trigger.

[00:07:21] This one is actually gonna come from the service worker. We'll take a look at the code in a second, but we click it. Oops, what happened to my image? Let's see, let's take a look at our code.
>> Steve Kinney: My remote Bill Murray didn't work. That's okay, we'll check that out.

[00:07:49] Let's take a look at the code. So in this case, if we try to get that mystery.png, what we'll do is we'll say self.registration will show a notification in this case. This will be the fetching my mystery image. We'll give it an icon, which just happens to be in assets is just a png file.

[00:08:09] This is the URL for it. Then we have some data. This is, theoretically in this case, the site that the image came from and just some arbitrary data of favorite color. And this object we can use, when they click on the event it will be included with the event.notification in this case.

[00:08:29] We can also include actions, which I'll show you in a second. On different operating systems this'll look different. Like in one case we have just a general click. On other operating systems like Android you'll have the ability to take different actions based on the notification. This is also true when we see it in Chrome there'll be a more and you'll actually see a few different options.

[00:08:48] And you'll see that there's just action and title. And the action is much like a tag in this case, and the title is what will actually be displayed to the user. And then in a service worker, we only have access to notification click. Inside notification click, that'll be where we have an event object.

[00:09:08] That event object will have a property called notification, and notification will have all of the different, the data, which action was clicked, if any, so on and so forth.