Laravel Push Notifications End to End Implementation (Web and Mobile)

Hello friends welcome back to the channel in this video we are going to learn about push notifications we are going to learn how we can build it using larav so post notification or those kind of notification where you send to the user and they will receive it even if their web browsers are not open so they can receive the notification on also you can they can also receive it in their mobile phones even if their browser is not all open in their mobile phones also Imagine you have an e-commerce website and you add a new product after that you want to inform all your customers that a new product has been added this is the link please click it to check the product so let's see it with demo for example in here uh I have two browsers open one Google Chrome and another Microsoft age let's enable notification when both of things let's click allow and in here also allow now in here I will going to type the title for example new subcriber and the uh message would be please subscribe to the channel now in here the idea of the product because we needed to redirect the users so now let's click Send notification okay as you guys can see I Got a notification in my Google Chrome now if I close this I will get another notification from the Microsoft H and if I click this it will redirect me to the product that uh I added the ID in here now if I display to you guys my mobile I got an another notification in my mobile also with the same message and if I click it it will you guys will see it will open the web browser and redirect the user to the product so let's see how we can build it and if you like it don't forget to press the Subscribe and like button and if you have any questions write it down in the comment the first thing that I have to do is to change HTTP to https because push notification will not work with HTTP you have to have https or local o otherwise it will not work so we have to change it to http and if you are running your project on Local Host then you can escape this part and jump to the next part but if you run using Lon like me then you have to do this steps so let's change it to https the first thing let's go to the settings of Lon and services and ports then enable SSL close this part then right click and select PHP then extensions and it should be open SSL should be take then after that you have to come to Apache SSL and click at Lon docr to trust it trust store click this now let's stop the our Lon and let's start again as you guys can see I got and lock icon in here it means that I can run my project in HTTPS now let's change it to https so let's type https fter now my project is running on https so this part is done now let's go to the next partk okay so now that our application runs on https the next step is to create our service workers service workers are those kind of a threat that runs in the background in simple words if I explain it means that if you want to run a code or something in the background of the browser even if the browser is not open so that's the job of our service worker right now when we send a push notification and want we want the user to receive it even if their web browser is not not open so that's the job of service worker so let's go in inside our public folder and in here let's create a new file with the name of service- worker. JS this this is just a name you can name it anything you want doesn't matter let's enter and in here we will create two even listeners one for post notification and another one for the click so when the user click the push notification it will redirect them for both of them we have to create an even listener so let's create a our first even listener which is for the Post notification so I will type self dot add even listener and this one would be for push then I will create a callback function with the event as a parameters so event and in here I will create a new variable to extract data from the event so I will name it notification notification so let's say notification is equal to event. data dot do Json then after that we want to display the notification so for that I will type even do wait until self Dot registration dot dot show notification and the first parameter in here that I will send is the title then after that I will send the body so for body I will type notification do body then we can also display that our logo in here so for that I will type icon and in here I will type my icon pad which is inside my public folder images SL logo.png then I want to send the URL so for that I will type data and in inside the data I will say URL and it will be equal to notification URL which we will send from the server site so our first notification which listens for the Post notification is done now let's create another notification for our event click listener and the push notification for that I will type sell do at evil listener again and this time for notification click so let's type notification click and also what another call back with the event as a parameter then again even do readit until and inside this I will say client do open window even. notification do data. URL so in here it will open a new window or tab when the user clicks on our notification no semic column in the end so our surface worker is done the next step is to register this service worker inside our blade file so let's see how we can register it inside our blade file so for that let's go inside our resource folder and inside our views folder in here I will create a new folder with the name of push notification so let's create that folder post notification and inside this I will create a new file with the name of index do blade. PHP and in here I will pause the video now I will add the HTML part then I will we will continue so let's pause it so welc come back in here I created a simple HTML form with two P one to enable notification and one to send for send the notification then inside this there are some inputs which we will send the title the body and the ID of the product so these are the HTML part that we create now let's create our ask for permission function and register our service worker in here so let's scroll down to in inside our script so in here first I will register my service for worker by typing navate Navigator do serice worker. register and give it the part of our service worker which is like this URL colon colon asset which is inside our public folder and service worker. GS so this part is done registration is done now let's create our for permission function to ask the user to allow the notification so let's scroll down and in here let's create a new function with the name of ask permission and in here I will type notification do request permission then I will create a call back function with a permission as a the parameter now in here I will have to check that if the permission is granted so let's type if permission is equal to granted then in that case if the user allowed for the notification get the service workers so for getting that I will type navigator navigator do server worker ready. then and new call back function with the isw or service worker as a parameter then subscribe so for subscribe we will type service worker dot po manager sorry do push manager do subcribe and and inside this you will say user visible Bell only to true then we will we have to send the application server keys so for that I will type application server key and for now we will just keep it empty then we will leter learn how we can get this after that then subscription so let's type uh subscription and console.log subscription DOL subscription up to now let's uh Zoom the page a little bit let's close this the in here we have registered our service worker inside our blate file then in this function we ask for the permission from the user to grant us permission to send them post notification and we will check in here that if the user give us the permission then after that we will just for now in here we will console L the subscription to see how the subscription look like so let's create a route for this and test it inside our project so let's go inside our web.php inside our routes web.php and at the end I will create a new route for this let type route colon colon gate sorry View and in here we will type post Dash notification and we want to display the push notification do index file okay now let's uh open our project Let's Go to http this col L project and let's type post notification okay so in here as you guys can see this is the button that ask for the permission the function that we have just created so let's uh open our inspect and let's go inside our application first of all in here let's get click on service worker okay as you guys can see in here our service worker is active and running now let's ask for the permission so let's click the enable notification let's go to console there's a problem okay we have not sent set this application server key yet we will not get so let's set this one also for that let's open the Google let's h and in here let's typee web push PHP and let's go to the web push library for in here in the GitHub I will put this link in the description also so it would be easy for you guys to find it so let's scroll down and let's uh go to installation and copy this line of code composer and add it inside our terminal so paste let's wait until the installation is finished okay so the installation is finished now let's go to our web browser again in the same repo let's keep it and duplicate this tab now let's go to web push lab in here in here they have one more repo with the name of web push let's click here scroll down and command like in here now in here we have to copy this and paste it inside our terminal again enter okay let's wait until this installation is also finished okay this one is also done now let's scroll down and copy this key line of good let's copy this let's paste it here enter again okay here we got our public key and private key let's copy both of them let's copy and paste it inside our index file okay zoom out paste okay so let's uh copy the public key first of all copy and paste it in here and our application server key okay now let's save now let's go un test our application let's refresh okay so now let's click the enable notification okay as you guys can see we got the popup which asks for the permission of the user to send the notification so let's click allow okay now this is the subscription of the users so in here I'm just adding it for testing purposes actually we need to store this inside our database this is the route or path or key anything that you see that connect our server to the user browser even if it's not open so this is very important we have to store this inside our database so let's go and uh create a new table and functions to store this information inside inside our database let's go inside our base code and let's open the terminal in here and create our model for our subscription and push notifications so in here let's type PHP Artisan Artis make model push notification okay I will pause the video and I will make the migration controller and the blade file then we will continue and explain to you guys what I did to make this tutorial shorter so let's pause the video okay so I I have created the adding part which we store the subscription in the database I will just explain what I did so I created a new model model with the name of push notification and in the migration of that model I just added one column with the name of subscription and the the data type is Json then in the mle I I just cost it as an array after that I created the push notification controller and created the adding made do which I stored the notification as an Json Json then I created the route to save this and inside my blade file in here I created this new function which is save sub which is send the data to the server site to save it inside database as an object so and in this uh ask permission I added this I call this function save sub which send the notification to our uh sorry send the subscription to our server so let's test this code one time so let's refresh Let's uh click enable notification we got the subscription and added successfully now let's test our database let's see is it added or not okay let's go inside our database and inside our push notification table Let's uh select grow yeah it it has been added so this part is done now we can all uh ask for the permission and save the subscription to our database now now let's uh create our send notification function to send the notification so let's uh create that function in here so we will use a to send the notification and the type is also post we will create this send post notification URL just in a bit and we will send that and the data we will send token and all these fields that are inputs that are mentioned in here so let's uh add them and in the success method I will just console log the response that I get from the server so this is done now let's go and create this uh URL let's go to our web.php and in here let's create it so let's type route col col post and uh give it out the URL then we want to go to inside our post notification controller so post notification controller and colon colon class and in the we will create a new method with the name of send notification okay let's copy this and let's go to our post notification controller and in here let's create the send notification method so I will type public function send notification and request dollar sign request after that I will go back to the browser and in here that we we install this Library just we will scroll down and the authentication part so here so let's uh copy this code from up to here let's copy it and paste it inside our mot and we also have to import this so let's copy the class Also let's paste it in here okay uh let's scroll down we don't need these two lines of code at the end let's delete them and in here in the subject I will type my website name which is https col uh colon colon sl/ laravel projects. test and public key we we are going to get it from the index. late. PHP this is our public key that we added here let's copy this from here copy and paste it in our public key here then after that we need private key we also have our private key we have copy it in down here so this was our public key and this is our private key let's copy this one also and paste it here now after this we have to create our playload so I will create a new variable with the name of payload and just set it to Json in code then we have title everything that we get sent from the it blade file so let's copy them let's copy this one also this one also so let's go back here and paste them here so we have to title body and IDE of product so let's uh set them to request same name so and just in ide of product I don't we have to change it to URL that's it so our payload is also done now after the payload we have to send it to all our subscribe clients or users so first of all we have to fish all our uh clients so I will type notifications and notifications and I will fish all the notification that we stored in our database so notification colon colon all now in here I will create a for each Loop and for each dollar sign notification let's change it to Notifications as dollar sign notification for each of them D withb send one notification and inside here subcription sub cryption colon colon create dollar sign notification and subcriptions this is the our column name which we have created inside our database so if I open this as you guys can see subscription the same thing so after that we have to send the payload so I will type add the payload and at the end we will send the TTL as an 5,000 so this part is done hopefully everything is set now let's go to our browser and test this let's open our browser let's go here refresh the page Let's uh type the title Please Subscribe body please subscribe to the channel and ID Also let's send some ID let's click Send let's wait for a few second okay we got our notification in here now let's click this yeah it will redirect us to the link that we provide here as if you guys can see here it theep parameter of our URL so hope you guys enjoyed the video and if you have any questions write it down in the comments and don't forget to press the Subscribe and like button

Channel: Code With ERaufi

Views: 1,518

Keywords: #Laravel, #PushNotifications, #ServiceWorkers, #WebDevelopment, #PHP, #Programming, #Notifications, #WebApps, #DeveloperTools, #BackendDevelopment, #WebDevelopmentTutorial, #JavaScript, #FrontendDevelopment, #WebDevelopmentTools, #CodeTutorial, mobile, web, notification, real time, real time notification

Id: AOLigc0T5tc

Length: 27min 8sec (1628 seconds)

Published: Mon Apr 08 2024