Web Push Notifications - End to End implementation

greetings friends welcome to a shot of code today we're talking about web push now this is the ability to send notifications from your server to connected clients and in the browser it's a technology that's been a bit of used on the web you know if you go to a web page and it immediately requests your permission to receive them it's just an annoying action you've got click block on all the time so you certainly don't to be just blatting that up with bouts they use it asking for it better to have a user initiate it by clicking on a button what you know once they've read and then been informed what sort of notifications they're gonna receive and so yeah there's definitely good ways and bad ways but let's jump in and see how you can implement this I'm gonna create a very simple web page they're just going to have a subscribe button we're going to click on that and then from the server we're gonna push out a notification to it now on the server side we're going to use a packaged web push that will that abstract away a lot that the nitty gritty and make it quite straightforward there for us so let's go into code here and create that that web page to start with so we'll just have them boilerplate there and then we'll create this subscribe button and handle at all pretty straightforward there now how does this actually work you know because this works even when you haven't got the webpage that's sending you notifications open and it does that by implementing it in a serviceworker so we're gonna have to create a serviceworker so let's let's get one of those in place you've normally check over if your browser support serviceworker I'm just gonna create it here so on the page load will create a yes let's do that navigator dot service rookie dot register and it's gonna be in a separate file so we'll have a serviceworker dot j s yeah and let's log out the result of that and not forget that it is a promise okay that's good let's write a handle an end for this subscribe button so let's have a function here so subscribe now when they click on subscribe we need to request that that we can receive notifications so I'll pop up that dialog and it does that by making a call to the push manager which is on the serviceworker so let's get the serviceworker again and we can do that in the or already property there and then let's get the push manager and that's officers where I got push manager and we can call subscribe on there ok now this takes a couple of options it takes a user visible only we're always gonna set that to true it was only needed in Chrome oh yeah we need it basically and then we need an application server key now this will be generated by our web push package and that gives us the glue between the client and the server so we'll have that that publicly public key on the client and then also the public and private on the server so I need to fill that in I'll probably forget but let's let's see how that goes we'll get an error if I could satisfy right that's pretty good there I think yeah what I want to do is I want to consult log out there was the result of this SUBSCRIBE call where is allowed or denied and also the the URL there so let's stringify the result so this this was up here normally you would want to send this back to the server to an API and store in the database and you'll have lots of these and then when you want to send out your notification you just iterate over those and send it out now that'll take too long so I'm just going to log it out and we'll manually manually do it on the server in this case here right let's create a new file it back on to the server side so if we create push file and let's pull in our package now on there and let's do push dot generate generate that one sooner generate that ID keys so visited the public and private keys I was talking about so just going to create these we're going to go to this step once and we saw these off so if I run no push whoops absolutely need their results there well let's call this n let's call it that ID keys okay so we get our public and private key so I'm gonna take those and replace them there so we don't know regenerate those every time and our public key goes out with the web app and I place it there in this case okay back on the server again so now we're looking at the code to actually send out a notification so on the push we need to set the vApp details back ID details and the first thing it wants is a mail to so we're just gonna put anything in there for the moment and then we also want to give the public and private key so that private keys public write it like so and then simply we call our post dot and sends notification and we're going to pass in a subscription whoops just call it's up test message so this sub is what we pull out from our database of stored people that want to receive a notification it's gonna be this value here the result of calling subscribe so when we run this we'll see what's actually contained within there right the only thing we're missing now is our serviceworker so let's create a serviceworker and we can do we want to listen for the push event on here and then we want to call self dot registration registration dot send notification like so and that is gonna take a title and then also some options so you can flesh this out with icons and make it look nicer than that why just this that's as simple as I can make it just for this demo purposes so there's a couple of links that I'll add into the description that show you more details on fleshing that out and more details on the web push packages as well but that should be that should be good on all those things now we can't test this on localhost so I need to get it on to the interwebs so I'm gonna put it into github and put it onto the net in the fire quickly so first thing let's get it on to github so okay a new one and push web and so if I grab that I can now do get remote origin and pop that in and then before I add I want to get ignore that's the dot git ignore put modules in there so now if I add the files we should see yeah that looks good so let's commit those and then push that up okay so that should get us into github and then I can quite easily pull internet were fine now so it was github and it was PW okay we can deploy that site once that's up so get rid of uptown now let's go to our page there's our subscribe button I get the console log up because I am bound to have some errors in here service work at registration that looks as though I haven't awaited it let me know it did await it okay let's see what happens let's give it a click okay so it's obviously run this part to be popping this up so if I do allow then here is the information that we need to store we've send us back in our API nap and store on the server you see it's got an endpoint and the authorization code in there so if I just copy that and pretend that it's been sent back to our database and then in our push code I will paste it here where we pretend we're pulling it out from the database back okay so we're setting everything up we've got our subscription and then the cents so we should just be able to push this out now I'll just go remembered to have that off because windows can't override this and keep those quiet for you so let's do a node push j/s now and see what we get yeah we didn't get it coming through now probably got a typo or or problem on this part here right so I'm just gonna grab that code from here hopefully so it's doing it's doing the same as what we had just a little bit more so in self dot registration show notification but the options has been fleshed out here as we got some icons and stuff I'm thinking that's probably where I had I don't think you need the entail that's probably why I had the problem so let's just put that in fine comment okay push out that should continues the employee with net laugh I so we should get that pretty quickly in here what did I do with it subscribe again still the same value actually I don't know I don't need to do that as such let's put it into short okay now I do a note push now here's my latest stuff there let's look in sources it might have might be waiting is waiting cool okay so that can happen if the website is open you need to have skip waiting so let's do that now I should have the latest one okay now if I run it now we get it yeah good stuff all right so there is our notification coming up in Chrome and now this used you start to do this on a browser by browser basis but it's unified now so this should work in all the other browsers let's try Firefox super nightly mode and so I'll just grab our URL back in so if I think subscribe well she was on it lightly user denied permission to use push API didn't ask me in here I wonder why now that's just after that it's just do it in a edge a minute I want it's gonna have to be canary edge I don't think existing age does it just ever let's try to see okay say yes I needed to so this one would be a different a different end point you can see it's SG to P rather than FCM so you know for each browser you need to have a different end point that looked good there this is slightly different so that is the edge one the existing edge not even chromium a5 edge and then Firefox I don't know quite where where it's gonna ask for permission so if I click this hmm I think that's just as I mean Knightly it's just not able to see this that's miss Crone sorry that's edge let's try this guy again no no it doesn't doesn't even give me the option interested we'll see where that goes but it will be a way to do that but there you go so web push hope that was interesting if you liked it give us a thumbs up if you want to see some more then click that subscribe and I'll see you next time thanks bye [Music] you you

Channel: A shot of code

Views: 88,213

Keywords: Web Push, Push, Notifications, web notifications, web push notifications, browser notifications, notification, tutorial, javascript, service worker, learn, teach, how to

Id: 2zHqTjyfIY8

Length: 17min 23sec (1043 seconds)

Published: Sun Oct 06 2019