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.2 Handling Notifications

Notifications are awesome, and they provide us with a lot of flexibility. We'll look more at the Notification API and set up our service worker to handle push notifications.

5.2 Handling Notifications

In the previous lesson, we created notifications and it's really cool. I mean, just look at that. I don't know if you have any experience with Windows 10 but this is a Windows 10 notification which It ought to be because behind the scenes, it's chrome doing all the work. It's tied into the system API's. And we get a Windows 10 notification. But everything about this notification is interactive. If we click on the action, we can execute code if we click on the notification itself, we can execute code. If we close the thing. We can execute code. I mean it's really cool technology. And it is so disappointing that it's not used and the reason is because of this, you know in the previous lesson I had said that it is recommended that you always request permission I should clarify that. I do not recommend that you do that. Because that is precisely why it is not used. Put yourself in the users shoes, which is easy to do because we use other people's sites and applications all the time. Nobody likes visiting a website for the first time, and then boom, do you want to enable notifications? No, I don't. I don't even know if I'm going to return to this website, much less use it or get notifications. And of course, if I'm asked the same question over and over again, no, I don't want to allow notifications, leave me alone. So if you plan on incorporating notifications within your application, I recommend that you allow the user to prompt themselves. So basically, if I were going to implement notifications, I would have some kind of option available, so that they would click on it. They would have to interact with it in order to then prompt them to give me access to give them notifications. It's such a simple thing. But if people had done that to begin with things like notifications would be more widely used. Now, yes, taking that approach, there is the possibility that your users will not opt into notifications. While they're not gonna do so if you bug them every time that they come to your website, so just keep that in mind what annoys you as a user of a site or an application, and don't repeat those things in your applications. Okay, so I will get off my soapbox, and let's go to our service worker because that is where we get to do all of our stuff now, because we are using our service worker to create our notifications This means that we can hook into events and do things when the user interacts with those notifications. So the first thing we're going to do is add an event listener for a notification. Click, event and it's all lowercase notification click and it's also quite a few keystrokes. But this will allow you to do something when the user clicks on the notification. So here is where first of all we can get the notification object from our event object. It has a notification object or property. And this will give us access to other parts of the notification. Like for example, our data. We included the task ID so we could get that from the notification data, task ID whatever we set it as in our display complete notification function. That's what we would use inside of our Service Worker. So we can get the task ID that way. And then we can also get the action. So if the user just closed the notification, we could do something like this to where we check to see if they closed it. And if so then we can do something. But the really cool thing is when we have our own custom actions, like for example, we had our action which I think was incomplete, something along those lines. If so then we could do whatever we needed to if we needed to send a request to the server to set the complete flag to false, yo, we could do that. Or if all the user did is just click on the notification, then we could do something like this to where we could open a window to our application. And if our application was set up so that we could actually view that task that we completed we have that ID. So we could just incorporate that with the URL. Of course, this isn't going to work, but you get the idea. So let's have some code that executes for incomplete here. And all we'll say is just make this incomplete. Of course, if we clicked on close, then we could write something else to the console there. That was not right. That's clients. There we go. Open window, and we can also notification, close there. In fact, we need to do that up here as well. And well, we can just close the notification right there. Now there's another event, let's just copy this and we will paste it. And the event is notification close, so if the notification is just closed we can handle that event too. But before we go any further, let's go ahead and let's see what happens here. Let's clear storage. Let's do a hard refresh. And whenever we click on any one of these incomplete items, we see our notification, that's great, if we click on Make Task Incomplete, we see our make this incomplete in the console, so that's where we would have sent a request to the server. And let's do the other one and if we click on this item, it should open up a new tab. And there we go. Of course we don't have anything. That is a resource of 3. But you know, we would normally display the task with that ID. So, it's really cool and useful technology. But now, we could do something with a push event. Now if you remember from the previous lesson, I said that push notifications are a combination of using the push API and the notification API. And you will see that being done here, because we are going to listen for a push event, and we are going to take the data or the payload from that push event, and then create a notification that contains that data. So that is a push notification. Now the push API, it is different than the notification API. And we're not going to go into any detail. What we will be doing is working with the data property, on our event object. So this is not like the notification to where we had to go through notification and then data, data is directly off of the event object and data itself. It is an object, but it's not something that we would just use right off the bat. So If we had a task ID, we would not do something like this, to where we would have a data and then task ID. More often than not, data is just going to be text. In fact, it's either text or its blob data. It's really nothing else if it is there. So then we need to treat it as text. So if we know that it's just normal text, then we can treat it that way. If we know that it is a JSON structure, then we will need to parse that into an object, but in our particular case. We're just gonna use it as text for the body of our notification. And we're gonna have a default here. So let's say that there was no data with push. That's fine. And then we will check to see if we do have some data. And if so, then we're going to set body equal to e.data. And we will call the text method there. And then from there it's just creating a notification, so we will wait until, and we will use the show notification method on the registration object, and that's really difficult to type. So we have registration. And then show notification. For our title. We'll just say that this is the push Notification, although let's make that capitalized. And then we will pass in our options object that will have our body there. So, there we go. And we don't need a semicolon there. That would have caused a problem. So let's go to the browser. Let's clear out the storage and let's do a hard refresh. And if we go to the service worker, we see that there is this push. So right now there's nothing inside of here. If we just send that push, we get a problem show notification of undefined registry. I said it was difficult to type just one keystroke and it just screws everything up. So let's try this again. Let's clear out the storage hard. To refresh blabbity blah, blah, blah. Let's try this again. We're going to send a push notification and there was no data with the push. And that's exactly right because there wasn't any. But here is a push from Dev Tools. So if we push that again, we see another notification here is a push from Dev Tools. And of course, whatever we put in here is going to be output. So if we had a Jason structure, well, we aren't parsing it into anything. But if we had a task ID, we could set that to 1. And then of course, we're just gonna see the text there. But that's the general idea. We could have taken that parsed it into an object and then worked with the task ID. So there we go. We can create notifications. We can do things when the user interacts with those notifications. And we can create notifications when we receive a push event. As I said, it's really cool technology, and it's a shame that it won't be used.

Back to the top