Sending Push Notifications with Laravel

hey everyone this is Ben in this video I'll show you how to send push notifications to browsers in a laravel project let's get started first create a new laravel project then open the project in vs code run the project alright this is just a simple learnable app to send push notifications we first need a service worker create service worker in the public folder the service worker is a simple Javascript file create a listener for push notifications here we can receive the notification data in Json formats then we can display it using the show notification method use notification.title for the title you can also add more options for example you can add a body you can also add an icon the icon can be any image file but you must upload it to your server I simply put it in the public folder we can also add additional data to use later here I add a URL for using the click action now create another listener or when the user clicks or taps on the notification notification click here use clients dot open window from the data use native URL which we have already defined now we must put this inside events. wait until and also this this is because these operations are asynchronous and may not complete before the service worker is terminated by using events that wait until we can ensure that the service worker remains active until these operations are complete alright now we need a Json object for the notification and it should include the title body and URL something like this okay our service worker is ready let's use it go to the views use Navigator dot service worker and register and the file name of the service worker then create a function to get permission for notification simply use notification that request permission and after permission is granted and we'll come back to this part later and create a button to run the method alright let's test it now we can send notifications in Google Chrome open devtools and in the application tab in the service workers we can see our service worker is activated and running here we can test it and here we can send the Json we talked about earlier copy it and all right it works and when we click on it it opens the link but let's see how to send this Json to the service worker from our level app go back to the request permission function and here first get the service worker use Navigator dot service worker get ready and then subscribe by using service worker that push manager dot subscribe here we need these options first user visible only second application server key and we must set user visible only to true and this is required because it ensures that the user has explicitly granted permission to receive notifications and that the notifications are only displayed when the user is actively using the browser and for the application server key we need to generate it and there are multiple methods to do so but now I will show you a simple and quick way just Google PHP web push we can use this package manage link slash web push and look for web ID foreign use this static method but first we need to import it we can do this with level tinker run PHP artisan tinger and import it and lab ID now use this to create web ID keys okay this is our public and private keys public key is the application server key copy it and we will use the private key later then we can get subscription data here and I simply use veg to send it to my database post method and for the body I use json.stringify and the subscription then a simple alert now let's create this route in the API here in api.php create a post root and okay now here we need a model create a simple model for push subscription with migration and in its migration add a new Simple Text field for data and migrate Oh yay now use the model and create and data and get all the request content and also we need to add data to the fillable of our model let's check it let me save these files and let me reset permissions and everything is okay and here in the database we can see our subscription data okay let's create a simple page for sending push notifications in the web routes create a get root admin slash notify and a view and pass subscriptions to it let's create this View just Loop through subscriptions and create a form for each of them with this action admin slash send notif slash subscription ID and post method and an input for the notification title another for body and URL and a csrf token because we are using the post method and finally a button for send foreign let me add bootstrap to it for better styling okay let's check it here is our form for subscription number one let's create this route create a post root with subscription ID and use root model binding enter request now here first create a web push object and an array with web ID key in here we need our public and private keys and also we need subject this can be our website address here it says it can be mail to or your website address okay now use web push send one notification and here we need to create a subscription object and please note that the subscription is from minishlink and is used to create the subscription object for use in the web push class and it is different from the push subscription model we created to store subscription data and here we need an array so created from our push subscription data and Json decoded and true for second parameter because we want an array and finally create a Json string from the request then assign the result to a variable and I use die and dump to show the results foreign it's ready and everything is okay let's check it on Firefox here is the subscription data for the user on Firefox and it works and if our website is closed it also works okay and before I start this project I can figure it my Apache server or the public folder of this project for this domain additionally I obtained a valid SSL certificate to it and now I can access this project through my mobile phone and I put the browser in the background and this is for my mobile browser foreign to the source code of this level project is in the videos caption

Channel: benixal

Views: 6,904

Keywords: Laravel, php, minishlink, web-push, notification, push-notification, laravel push notification, laravel notification, serviceworker, service worker, javascript, sw.js, request permision, pushManager, Notification.requestPermission, applicationServerKey, userVisibleOnly, VAPID, VAPID keys, javascirpt, notificationclick, event.waitUntil, Laravel Push Notification Tutorial, Notification API, Notification Services, Backend Development, Programming, Push Notifications

Id: 7w6rGIOwXTc

Length: 26min 54sec (1614 seconds)

Published: Mon Mar 27 2023