How To Send Push Notifications With JavaScript

in today's video i'm going to show you how you can send notifications to your phone or to your browser and all this is using built-in client-side javascript and it's super easy [Music] welcome back to web dev simplified my name's kyle and my job is to simplify the web for you so you can start building your dream project sooner and today we're talking all about push notifications which are built into the browser now to get started i have a simple script page that i'm loading into my html and a single button that i can click on and then in my javascript i just have that button being selected and we have an add event listener for the click so if i click on the button for example i can alert the text hi and when i click you can see it alerts that text height super straightforward stuff now what i'm going to be using this button for is to demonstrate how push notifications work in the browser and push notifications are all built around this notification object this notification object allows you to do everything you need to do with push notifications so in order to send push notifications you need to request permission from the user you can't just send notifications without them allowing you explicit permission to do so so we can say request permission inside of here and this is actually a promise that it returns so we can just say that then and that's going to give our permission level back to us so we can just say alert perm to alert what our permission is so now when i click on this button you can see it's saying denied right now and that's because i've explicitly denied notifications if i click reset here that'll reset that for me and allow my reload my page now if i click on this you can see it's asking me hey would you like to show notifications for this your page do i have blouse or do i block if i say block again it'll tell me denied but if i come back in here and reset this and i do a refresh again and i click and i actually say allow this time now it's going to say that my permission is granted i can actually do push notifications so how exactly do you use push notifications well all you need to do is create a notification using this notification object so i'll get rid of that alert for now and i'll just do a simple check to say if our permission is equal to granted which means that we have allowed this then what i want to do is i want to send a new notification and to do that we just create a new notification object and this is going to take a title for example we'll just say example notification now if i save this and i click the button again and as you can see this just has that text example notification inside of it and i have an x button that i can close out of that notification with this is the most basic way to create notifications and this is going to work on your phone as well as on your computer and is super handy for sending out notifications when things happen but you can obviously get quite a bit more involved so let's come in here and there's a second options argument you can pass and inside of here as you can see there are tons of different options you can pass i'm going to cover all the different main options that you need to worry about because some of them are not really supported yet or they're experimental for example the actions and the badge feature those are both experimental features not really supported in any browsers except for maybe chrome but the body feature is really important for example i could say this is more text and now if i click the button here you're gonna see it says example notification as the title oops and it also says this is more text and when i actually click on this notification like hold down on it or you can see i can actually block the notifications if i want and same thing if i click the settings icon up here so there's a lot of different ways to interact with this but for now i'm just going to close out of it so the body allows you to add more information to the notification if we come further you can see that we have this data attribute data is just custom data you add to a notification that you could use later on so let's just put in some data here that says hello world it's just a custom object it can be whatever you want and we can create this notif object this is just our notification we'll call it notification we're going to take that we can just say notification dot data and we can actually access that data so anytime we access our notification we can get this data property to access that notification and with notifications you can actually add event listeners so for example i can add an event listener for whenever i close the notification this is going to pass an event inside here and this event is just my notification and for now i'm just going to console actually we'll do an alert of e and we're going to do ah let's just console.log it console.log e just like that so now when i click and i close out of this notification it'll log that event into our console so if we open up our console you can see we have our event and inside of this event we have our target which is our notification that has that custom data inside of it as you can see here that hello world data that we saved on our notification so this is a really good way to pass data around if you need to like do something when someone closes a notification or clicks on it because as you can see we have a bunch of different events for example we have close we have click that we can do we also have error and show so show is going to be when the notification shows click is going to be when they click anywhere in the notification close is going to be when they close it an error this is really important for example someone denied notifications for you so we can have this error here and i'll just oops alert error so for now if i click this it's never going to alert error because everything's working is fine but if i come in here and i actually deny the permission for notifications and i just refresh my page and now i click it's going to actually be an error when it tries to send this notification so if i just move this outside of our permission section and i try to send a notification when i don't have permission you're going to see it logs out error because it's not allowing me to send that notification so it's detecting that as an error let's just move this code back to what we had before and i'm going to change my permission to allow notifications due to that refresh so that way my notification shows up down here so there's a few other properties i want to talk about if we come into here we can see that we have an icon property the icon property allows us just to set a logo or an icon so i have this icon called logo centered so i'm just going to come in here i'm going to say logo centered dot png and now when i click on this you can see we get this web dev simplified logo in the right hand side which is what that logo is representing so this allows you to put a little icon on your notifications which is cool now kind of the final different thing i want to talk about here before i start to go into an example is the tag attribute because all these other attributes that you see they're pretty much all unsupported or only supported in some browser so i don't really want to cover them because they could change or they don't really work that well and most of them are pretty self-explanatory like silent makes it make no sound vibrate makes it so it'll vibrate your phone and so on but the tag property is really cool this is like a unique id that you can give it for example i can call this the welcome message for example and now when i try to click to create a notification if i create a notification with the same tag it'll actually overwrite that notification so for now i'm going to comment this out i'm going to show you what this looks like without the tag so when i click here it makes a notification i click again it makes another and another and another and another they're just essentially going to stack on each other up to a maximum of three it looks like that it can show at one time and you can see those other notifications are popping in if i close out of all these and i put the tag back in now when i click on this you can see it shows the notification when i click on it again it just overwrites the existing notification no matter how many times i click it's overwriting that one notification now if i change my body here to be something like math.random which will just give us a random number between zero and one now you're going to see the real power of this if i just close out of this i click you can see that we have a random number 0.399 click on it again now we get 0.088 click on it again and you can see it's just updating that notification while without the tag property it's creating a brand new notification every time and they're just stacking one on top of the other so this tag property is really cool if you want to overwrite a current notification with new information inside of it for example if you're messaging back and forth with someone and they reply you may want to put their reply in that section and if they add a new message you may want to put that new message also inside of the body of your notification so now i kind of want to talk about a little bit of an example this is an example i would never recommend you doing on a real site because it's super annoying but it's a good example of what a notification can do i want to add an event listener to my body here it's going to be called the visibility changed event and all this does is detect whenever you lose focus on your page and you for example hide your page so whenever we hide our page so if our document.visibilitystate is equal to hidden that means we are no longer on the page i want to send a notification asking the user to come back so inside here i can just say new notification and i can just say come back please there we go and let's just put a body inside here the body will just say please there we go and we'll also give it a tag of come back that way if we ever do create a new notification it'll overwrite the existing one for that comeback tag now we can just save that real quick and whenever i actually lose focus on this page so for example if i just go to a new tab here you can see i've lost focus and now you can see it says come back please right here and then when i come back it's obviously not getting rid of this yet but we want to actually make it get rid of that notification so i'm going to say that this is going to be a notification we're going to save that inside of a variable notification is equal to nothing to start with and then here i'm going to say notification is equal to this now eventually that notification will disappear on its own when the user comes back to the page this is going to trigger again because the visibility changes from invisible to visible and this else statement right here will run and we can call notification.close and it'll close out of our notification so if we lose focus you can see the notification pops up when we come back it's going to automatically close itself which is really cool now we can take this a step further actually and continually update this notification to let the user know how long they've been away from our page because we don't want them to be gone for very long so let's create another variable called interval and this interval is going to be because we're going to set an interval that constantly updates our notification so set interval and inside this set interval we're going to run a function let's just run it every 100 milliseconds and we're going to create a brand new notification and we're just going to constantly be setting that value here now we already have our tag set up but in the body i wanted to say something along the lines of you have been gone for x seconds i want to fill in this x variable right here with the actual number of seconds since last time they were on the page so a pretty easy way to do that for us is we can actually create a variable for when they left and that's just going to be a new date like this and then what we can do inside of here is we can say we want to get the current date minus the time that they left and this is going to be in milliseconds so we need to wrap this in parentheses divide it by a thousand and then we want to just round that so we'll say math.round that value that way it's a round value there we go so now it should say you've been gone for one second two seconds three second four second and so on so if we leave the page you can see it says come back please you've been gone for two three four five six and so on it's just constantly counting up and we come back here it's going to close but you'll notice it re-pops back up and that's because our interval hasn't been cleared yet so we can just save our interval like this and then down here we can say clear interval of our interval just like that we can also make sure we do a simple if so if we have an interval whoops interval then we're going to clear it and if we have a notification then we're going to close it just to make sure we have all that working now if i refresh my page real quick close out of all my notifications leave the page it's going to pop up that message for us you've been gone when i come back it disappears and that's perfect now the biggest key to these push notifications though is that you need to make sure you ask for permission first with the request permission function and this request permission function should only run whenever a user actually interacts with your page to ask for permission so for example clicking a button or checking a notification setting that says i would like to receive notifications this is because you don't want to spam people with notifications that don't want them so they want you to actually have some type of user interaction before you call this request notification function here otherwise it's just going to work just fine you just create a new notification and it'll automatically send it to the user for you and that's all there is to the notification api it's a really simple api but it has a lot of power behind it and if you want to learn about more simple apis that are incredibly powerful i have tons of javascript videos on them i'll link a couple of them right over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 232,259

Keywords: webdevsimplified, js push notification, javascript push notification, push notification web, desktop notification js, desktop notification, javascript desktop notification, js notification, javascript notification

Id: Bm0JjR4kP8w

Length: 11min 37sec (697 seconds)

Published: Sat Sep 10 2022