React js PWA tutorial #12 push notification popup | Progressive web app

hi everyone welcome back to my channel my name is anil and this is our 12th video on react with progressive web app so in this video we will talk about the web push notification right so you may hear about the push notification in the mobile like when someone just sent your message on whatsapp or text message then you will just get a notification on your mobile status bar right like someone send you the message and all when you just click on it then you will just redirect your application the same thing is happen with the web also there is a kind of push web notification with the web if you just want to see in some example so let's let me just show you that how first of all we have to allow them and if we just able to allow then if just this website just want to some provide some information with the push notification that easily can provide right so uh by default actually i blocked this push notification because i don't want to get them but by default ask notification is set here right so whenever you just open some website then they just ask you to that uh this website wants to show notification right so if you just allow them then they will just send the push notification to us uh whenever just they want to send a push notification right and i will show you that how you can just send the push notification at all but they're complete but first of all this uh pop-up will be here and if we just allow then only that case we will just get the push notification right so let's say i'm just going to allow it right so in this video we will focus that how we can just show you this pop-up to you or any user right how we can do it so let's check out the points of this video we will see that how it's actually work with a push notification then there is kind some kind of key that we have to use in this program like vapid key and then i will just show you the application server key what is that and we will understand it i already made a function for these two application keys this is here so that we can save the time and you can get these functions from my github account link is given in the description box right then after that we will i will just write some code and we will see that how we can allow the push notification in our website right so for how it works for that let's check out this diagram which i made so first of all we have to just allow the push notification then server will send the push notifi push notification to the service worker this is our service worker and i hope you remember this service worker we are just working with the service worker in the old videos like this right to send that to this series worker and this service worker actually send the notification or you can say that the push notification to the web page right so now you just got the idea about that how this complete process will be gonna happen then uh for more information uh let's uh just see that what is the uh verbit public key right so if you just want to know the full form that is actually voluntary application server identification right so basically this is a authorization key so it will just authorize that the server which will be send the push notification or push notification data to us it is valid or not right so for example i just allowed the push notification to my website and some unethical server just sent a notification to us right so this is not a good way or this is not a proper way so if you just want to uh relate this example so you can see that it's like a jwt authentication token right that just authenticate the server api and request so that client and server get to know that they are just getting the data from authorized person right so it will just authorize the server as well as uh you can say that the client also because both are actually using this webit key now what is the application server key so basically application server key is a encoded version of a webpage public key right so in this example i will show you that if you don't want to use this example that how you can generate this key and all so i already have a static vapid key and uh we will just send this rapid key to the url base64 to unite it array right what actually it will do it will just convert it in the encoded form right so here you can see that uh in these functions we just replace the some keyboards like dash with the plus and uh underscore with the slashes and we just repeat the same data right and loops and all right so this is a very pretty simple code you can i hope you can understand it and after that we will just send this data to the service worker right and i will show you that how we can send the data so i will just use this key code and if you don't want to use this code then you can just use this web push npm right and here you will just find all kind of things like if you just want to get the vapid key you can just get it from here like web push dot generate web key so very simple you can just simply use this key and whenever you just want to uh apply to the service worker then you can just send it directly to here like this is the public key and this is a converted key and this is send it to the application server key right so that's all a very simple example if you just want to use then it's you can use this also right so both are the similar thing right i even you can see that this code is also code is also similar right so now let's just start with the code first of all i am just going to put this function on my file where we have to use it on the s w dot dot dot js so we just created this file in i think uh second or third video right and after that we did not widget this but don't worry now it's again useful and you can see that we are actually loading our service worker file from this file through this file right so first of all let's put this function simply and now let's uh just copy this function also like this and just paste it here right now this valid key will just uh come here with this function and this function basically is encode this vapid key right and let's see that how we can use it simply so for that we actually have to just uh work inside our service breaker uh registration right so just simply write here response dot push manager dot get subscription right and you can just simply return over here if you just want let's return it and uh basically this is an uh this is provide a promise so that we can just use dot then let's take it in the next line right and uh just choose a callback function here right and if you just want then you can just use here parameter also right and this is not an arrow function so we don't need this one and here we can just simply return response dot push manager dot subscribe right and this subscribe function actually have a object as in parameter so it will have the two uh keys one is the user visibility it should be true and then our second parameter is application server key and where we will get it from we will get it from here determine this right so determine app server key right so just right like this and now let's come back to the our application and just refresh it let's go to the ask default reload it once and now you can see that our application is also asking about the push notification and i'm just going to allow it whenever we are just going to allow it you can see that the push notifications are allowed and now in the next video we will basically set up a small you can say that the small server thing so that we can just send the data to our client and through the tcp right no with the normal api we will send with the tcp and i will tell you what is the tcp and all don't worry in the next video and we will get the notification here and then we will check it in the mobile application as well as we just tested in the previous versus right so don't forget to subscribe my channel and like this video bye bye take care

Channel: Code Step By Step

Views: 45,545

Keywords: React js PWA tutorial, react push notification, push notification popup, Progressive web app, anil sidhu, react pwa

Id: gvN3SA3CaWE

Length: 9min 46sec (586 seconds)

Published: Thu Jul 30 2020