7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Creating Notifications

Push notifications are a combination of two APIs: the Notification API and the Push API. We'll look at how to create notifications in this lesson.

5.1 Creating Notifications

Push notifications are the result of using two API's. We have a notification API for notifications. Then we have a push API for well, push. And we aren't going to spend a whole lot of time talking about these API's. We'll spend a little bit of time in this lesson and in the next lesson. But that's it. Because push notifications are actually kind of controversial. And it's not because they are bad, because really they're not. It's just that user behavior now kind of prevents their usefulness, because we've all been to a website. It's not just one or two. We've been to many websites where the first thing that pops up. This website wants to use your location. Yeah, and nine times out of ten we click no. And then, another pop up. This website wants to send you notifications. Most of the time we click on, and that is the behavior which is good. I mean, don't get me wrong, that behavior used to be to click on yes to everything, and as somebody who works in IT, that's a nightmare. Thankfully, people have learned that no is really the thing that you want to select. But as application developers, that's kind of problematic, because here we have this really useful and cool tool. But it has been abused so much, that it's almost useless as far as the user's concern. Because chances are, they're not gonna use it. So when it comes to push notifications, yes, if you want to include it within your application, feel free to. There are some people who will use it. However, the vast majority of your users will not. So really, you're better off spending time implementing something else or adding polish here. Or really fleshing out and implementing a feature there. I mean, sure, provide push notifications, don't spend a whole lot of time on it. So we're saying that, let's get into the notification API. So we have this global object called notification. And of course, if we want to send notifications, we have to request permission. And so we wanna ask the user to give us the ability to send them notifications. This function, or this method accepts a function that will give us the status of their decision. And status is just a string value. So if we have been granted access to send them notifications, then we can do that. And we can do so in a couple of different ways. The first way, would be to just new up the notification constructor, and then pass in whatever message that we wanted. So, howdy. There we go. And before we do this, I'm gonna change our cache. Because we're going to spend a lot of time in AppJS. And I'm gonna put this into the dynamic cache now. And let's go to the browser. Let's clear. Well here we are. Let's close that for now, [LAUGH]. Let's clear our storage, so that we get everything nice and good. And here we go. Show notifications. Yeah, we'll go ahead and allow. Nothing happened. Here's the other thing. Some users may have that turned off, like I do on this machine. So I have to go to notifications and actions, and get notifications from app. But now we need those notifications. So let's do another refresh, and there we go, we have our notification, that's great. And of course as it is right now, anytime that we do a hard refresh, that thing is gonna pop up. So, let's go back and let's comment out that line. Because let's look at another way, whenever we register our service worker, we have this registration object. And this gives us the ability to also, show a notification. With the show notification method. And then once again, we can pass in our string. And whenever we go to the browser, we will see a different notification. Hello there. So to create a notification, you can use the notification constructor. Or if you have the registration object from registering the service worker, you can use that as well. Now it's recommended that you always request permission. Because users permissions can change at any given time. Because we can go into the settings in the browser, and we could change our notification settings, for our website. Just do a search for notifications. And here we go to site settings. And we can drill down into here, and we can change our notification settings. So that we can ask which is the default or we can block, so it's recommended to, bug your users to request permission. And if you do request permission, chances are you don't want to just immediately show notification. You typically want to do that when an action occurs. Like for example, if we complete one of these items, we could send ourselves a notification. Because it wouldn't be apparent enough that we had completed that. So let's add a function up here, to where we will display the complete notification. And we want the task that we're going to be working with, because there are certain things that we can do with the notification. That's actually quite useful. So of course, the first thing that we need to do is check to see if we have permission to send this notification. So we're going to use our global notification object. And we have this permission property that we can check to see if it is granted. And if so, then we of course want to go through the process of creating a notification. And of course, we can create the notification using the notification constructor. However, if we use the service workers registration object, well then that will create the notification on the service worker. And then that opens the door to a lot of really cool extra things. So let's do that. But how do we get there? Well, we need to use our navigator. Then we will use the service worker object, which is going to give us the get registration method. And this is a promise. So then, we will have our registration object and then we will just show the notification. Pass in the text that we want to display, which in this particular case, we'll just say task complete. But as I mentioned, there's a lot of extra really cool things that we can use here. Now that we are creating this on our service worker. And we can create an object that has a ton of different options. So let's go ahead and do that. Like for example, this task complete is actually the title of the notification. It's not really the text that is displayed in the body. So we can provide the body text, which in this case would be, you completed the task because that wasn't apparent enough. [LAUGH]. But we can also supply an icon. And this is nothing more than the path, to the image that we would use for the icon. We can also make the device vibrate. So if we wanted it to vibrate for 100 milliseconds, then pause for 25 milliseconds, and then vibrate again for a second, we could do that. That capability is there, but here's the really cool thing. Well, one of the really cool things, we can attach arbitrary data to this notification. So if we needed to access, say the task ID, we could do that and provide that. And we can also provide actions, but right now let's just run with this. We don't have an icon, so let's comment that out. That's coming out vibrate. Let's run with this. So we'll see what we have. So we click on our thing. That didn't work. Because we didn't call the function. Yeah. So let's go down to our toggle complete. And if we are online, let's check to see what the new value is. If it's true, then great. We want to display our completes notification, we will pass in the task. So there we go. So now, let's do a refresh. Let's click on any one of these and there we have our task complete. Although our body isn't in there, is it? So let me make sure I did that correctly. We didn't pass the options. The options is the second argument. So that's kind of important. So now we can go back, click on the thing. We have test complete, you completed a task. Now, we can also add our own custom actions if we wanted to. So we can have our actions, which is an array of objects, and we just need to supply the action, which is kind of like the event that would occur. So let's say that we wanted to provide the ability to reverse, completing the task. So we could say that the action is incomplete. And then we can supply the text for this which will be the title of this action. And it will be make task incomplete, and If we had an icon, we could supply the icon as well, which again is just an image file. But there we go, we have an action. So now if we go back to the browser, let's refresh and we should see notification again. But now we have this action. And here's the really cool thing. If we click on this action, then we can do something, we can execute code. If we click on the notification itself, we can execute code. If we close the notification, we can execute code. So there's a lot of extra things that we can do once we use our service worker to create these notifications. And we will look at that in the next lesson.

Back to the top