Send push notification using javaScript and PHP

[@twoxim]

One of the best instructional videos, and I've watched 1000s. Easy to follow and understand! Keep up the great work!!!

[@sebaszwarc]

ok, the reason navigator is undefined is because notification works only with SSL environment - author didn't mention that at all and because he is using localhost it's even more confusing because you cannot setup https on localhost - certbot will complain as this is not a domain.

[@genesaretjohnes5732]

on mine it works. i think some web apis that need secure context are able to be tested if we use localhost.

[@nicholasosinski4097]

I tried so many guides for how to do this and yours worked... the first time! Thank you so much for the video and for the source code. Thank you!

[@benixal]

Thanks, Nicholas! Glad it worked for you!

[@nicholasosinski4097]

I don't suppose you have an example for queueNotification & flush? Thanks again!@@benixal

[@nicholasosinski4097]

Never mind ...I figured it out. Thank you so much, again! 😀

[@sebaszwarc]

Problem is it's not working

[@andrejhohnjec4106]

Like watching Bob Ross for coding. Excellent!

[@benixal]

Glad you enjoyed it! Thanks for the kind words!

[@RuebenTijani]

😂 push notif. The laziness to type out full words gets me too 😂😂

[@benixal]

😂✌️

[@smitshah3377]

Great video. For some reason, the notification "icon" is not showing up along with the notification. I have added it as a part of the payload but have had no luck. Any idea?

[@jimpannell2035]

Thanks for this Ben - I've found it extremely helpful 🙏

[@benixal]

Glad it was helpful! :)

[@matrixco5579]

Super, thank you 👍🏻🙂

[@wildanshalahuddin3824]

i'v successed implement your code in plain php, but when i use codeigniter 3, why i cant get the endpoint in the console.log ? its just blank, not error, just blank. Like something block this code "then((subscription)" in the codeigniter view, Can you help me ?

[@benixal]

Make sure that the Service Worker is registered: (06:11) and I checked this with CodeIgniter 3, and I was able to get the subscription data: github.com/benixal/CodeIgniter-3-pushManager-subscription-example

[@GiaMisseri]

I can get this working on desktop browsers, but the subscription data is not being generated on iOS for me to save... help please?

[@lucapagura9873]

Thank you so much you’re an amazing friend But does it work on mobile like android and iOS

[@Coder-j1p]

Mention : If you're using the localhost you can't able to subscribe the client because the API support only https request , since localhost runs in http it will not wok

[@vassilismatragos3043]

Thanks for this Ben!

[@marjaybumalod2583]

how to fix this " Uncaught RuntimeException: Unable to create the key in C:\xampp\htdocs\push_notification\vendor\web-token\jwt-library\Core\Util\ECKey.php:98" ?

[@benixal]

The error 'Unable to create the key in ....\ECKey.php' is likely because OpenSSL isn't turned on. To fix this in XAMPP: Open the php.ini file. Look for ;extension=openssl. Take out the semicolon before it. Save and restart XAMPP. If you don't have OpenSSL, you can use a website to make VAPID keys. Just search "generate VAPID keys." But remember, this is mainly for practice, not real projects

[@marjaybumalod2583]

@@benixal OpenSSL is enabledPHP Fatal error: Uncaught RuntimeException: Unable to create the key in C:\xampp\htdocs\push_notification\vendor\web-token\jwt-library\Core\Util\ECKey.php:98 Here is the another error

[@LeguizChristianA.IT-31WEBAPPDE]

is that ok to use only the first part of the video where you not using a library

[@HoneyBee-kj3db]

Where should I put each file if I use CodeIgniter 4?

[@sampahemmanuel2643]

Exactly what I needed. Thanks

[@benixal]

You're welcome!

[@pingxtratech]

This is so good. Thank you. I'd like to ask, the notification will only work while the browser is opened yes? Is there a workaround for sending notifications while the browser is closed?

[@benixal]

You're welcome, thanks for your comment, Notifications will be received if the browser is fouced or in the background, (even if your webpage is not opened). On mobile devices: browsers are usually running in the background, so notifications will usually be received. However, on desktops, if the user completely closes the browser, notifications won't be received and they'll receive them immediately upon reopening the browser (there's no need to open your website, just run the browser)

[@oriamergi5445]

Thanks for the tutorial! I'm stuck in getting the end point after creating the "enableNotif" button. The promise isn't resolved. Up until that point we only used the backend to create public & private keys which we pasted (only the public) in "applicationServerKey" right?

[@benixal]

You're welcome! Yes, use the public key for the applicationServerKey . and please provide more details about the error you are getting in the console.

[@AmarSingh-e6u5r]

in my case .then((subscription)=> { console.log(JSON.stringify(subscription)); }); i am not able to see subscription

[@caseysky102]

same here

[@falinhares]

I am getting an error when going for the application test: Cannot read properties of undefined (reading 'showNotification') on line event.waitUntil(self.registration.showNotification(notification.title, {...

[@falinhares]

Found a type and corrected, but you have to click to update the service. It doesn't update by itself...

[@benixal]

That's due to browser caching. add a unique random query parameter when registering the service worker each time you update it : navigator.serviceWorker.register('sw.js?v=2') or navigator.serviceWorker.register('sw.js?v=' + Math.random())

[@Andy-zr8pw]

if my project use php v 7.4, what it is work ?

[@benixal]

Yes , but to install `minishlink/web-push` (09:38) ... based on the README from github.com/web-push-libs/web-push-php, ``` PHP 5.6 or HHVM: v1.x PHP 7.0: v2.x PHP 7.1: v3.x-v5.x PHP 7.2: v6.x PHP 7.3 7.4: v7.x ``` you should install version 7.x for PHP 7.4 compatibility. Here's the command to install it: composer require minishlink/web-push:^7.0

[@Andy-zr8pw]

thanks you @@benixal

[@nishants3967]

Hi Ben, how do I do with SSE server in Node.js, and PHP pages (pre-render) consumes this SSE events. I wrote few snippets but its not working in onmessage. Help appreciated. Thanks.

[@benixal]

Hi Nishant , sorry not familiar with that , thanks for your comment.

[@nishants3967]

@@benixal No issue. :)

[@philippeachache4600]

problem: I m stuck with the file send.php about [reason:protected] =>curl error 60, is there a issue to solve it easily

[@benixal]

Check this out: github.com/web-push-libs/web-push-php/issues/93#issuecomment-421913383

[@benixal]

change this line: $webPush = new WebPush($auth); to this: $webPush = new Minishlink\WebPush\WebPush($auth, [], 30, ['verify' => false]);

[@philippeachache4600]

@@benixal You 're great, man!

[@fonnets]

Hi Ben, after successfully testing everything locally (Mac, MAMP and domain localhost) I tried to test the push notification using an aws ec2 instance and a domain with ssl certificates, but the push notification doesn't arrive... Printing the notification response looks ok, so it's not clear what's stopping the notification from arriving. I have tried with Chrome, Safari and Firefox. My server side stack is ubuntu 22 / apache2 / php 8.1. Do you have any idea? Thanks

[@benixal]

Hi there! Thanks for your message , Sorry, I'm not familiar with AWS EC2 instances. Consider asking on AWS forums or Stack Overflow for help. Best of luck!

[@fonnets]

I thought they were problems for notifications from remote servers, since initially only locally it worked perfectly. I did various tests, even with serverless php services, then I tried and tried again, and now I can say that it also works as a remote server with a domain with ssl certificates. It works really well! Thanks again Ben!

[@benixal]

You're welcome!

[@lwiimbokasweshi]

Excellent video

[@sampahemmanuel2643]

Hi Beni, please how do I position the notification at the bottom right of the screen when the browser is closed or not

[@benixal]

No, you can't control the position of browser push notifications. They appear according to the browser's default settings.

[@sampahemmanuel2643]

Hi Beni, assuming I host my PHP app on Digital Ocean or a Shared Server, can the push notifications still work. Thank you

[@benixal]

Hi Sampah, according to the README (github.com/web-push-libs/web-push-php#readme), if your hosting provider supports mbstring, curl, and openssl, and you're using PHP 8, 7, or even 5.6, then you can definitely use the web-push-php library for push notifications.

[@abdulhameednabhan5595]

What should I put after the word send in link? server kay from fairbase messaging token?

[@benixal]

Sorry, but I did not understand your question Could you please clarify your question or let me know the specific time stamp in the video you're referring to?

[@basically_basic]

I don't have autoload.php file

[@fonnets]

Hi, the tutorial is very clear and complete! I managed to replicate the example and everything works. However I don't understand how to manage subscriptions, because to send a notification I have to insert the json of the subscription into the function. This example works with only one browser but if I have to send notifications to multiple browsers do I have to keep all subscriptions and send each one? Thank you

[@benixal]

Hi, I'm glad the tutorial was helpful. Yes, to send notifications to multiple browsers, you should store all subscription data in your database and then send notifications to each one you want. But if the number of subscriptions is high For example, you want to send a group notification to 10,000 people It is better to do this on a scheduled basis, for example, once every few seconds .. or use several servers and networks But if the number is much more than this, it is better to use other services such as FCM that allows you to send push notification to very big group of subscriptions.

[@fonnets]

Hi Ben! Now is all clear! Thank you!@@benixal

[@bst-football]

@@benixal hi what is FCM?

[@meirbek241]

​@@benixal Hello, Ben. Thank you for the great tutorial. Do you know where can I read about limitations in terms of number of people for sending push notifications using current approach? For example if I want to send push notifications to around 100 users (single notification to a single device) on a daily basis, will current approach work properly?

[@geplaksisilla2742]

@@benixal Dear Benixal! Very useful tutorial, thank you so much! Can you write a sample how can i send more then one subscription?

[@benitocanfora7667]

Great video, thank you :)

[@benixal]

You are welcome! Glad you liked it!

[@FabianD1991]

Will these notifications be displayed on the mobile? At least with the browser in the background. Thanks!

[@benixal]

Absolutely! Notifications will appear on mobile devices, even if the browser is in the background. Thanks for your question!

[@fonnets]

I tested notifications with iPhone (iOS), it works great! You just need to add web apps to the home screen from Safari first.

[@iloveyou-kd2lf]

7:03 I cliked push button. but it is not showing popup. Why?

[@benixal]

Check the console logs.

[@diegovillafane6313]

Hi Beni, great content, can I ask you, are you runing the page in a live server or what are you doing to run it?

[@diegovillafane6313]

I used live server so it's ok, THANKS A LOT!!!

[@benixal]

You're welcome! Thanks for your comment. In the video, I used Apache web server (locally) on Ubuntu. However, you can run the page on any web server of your choice

[@zenoxgaming3837]

Thanks😁❤❤

[@benixal]

You're welcome! 😊

[@HeryPurnama]

Thank u so much

[@benixal]

you're welcome.

[@sebaszwarc]

I was expecting to find proper tutorials but yours has errors - Cannot read properties of undefined (reading 'register'). navigator is undefined anywhere. how can you post code without checking

[@benixal]

Thanks for letting me know! Could you please tell me which browser you were using when you encountered the error?

[@bamcatiloc5735]

It will work in localhost?

[@benixal]

Yes.

[@bamcatiloc5735]

Thanks bro

[@abdulhameednabhan5595]

First of all, I would like to thank you for this wonderful content. Please help me. I am a beginner First, I had problems when generating the key, so I used the same keys that you used, I mean the keys that we generate with php, does this affect? This is the error Fatal error: Uncaught RuntimeException: Unable to create the key in D:\xampp\htdocs\testno\vendor\web-token\jwt-core\Util\ECKey.php:98 Stack trace: #0 D:\xampp\htdocs\ testno\vendor\web-token\jwt-core\Util\ECKey.php(72): Jose\Component\Core\Util\ECKey::createECKeyUsingOpenSSL('P-256') #1 D:\xampp\htdocs\testno \vendor\web-token\jwt-key-mgmt\JWKFactory.php(69): Jose\Component\Core\Util\ECKey::createECKey('P-256', Array) #2 D:\xampp\htdocs\ testno\vendor\minishlink\web-push\src\VAPID.php(165): Jose\Component\KeyManagement\JWKFactory::createECKey('P-256') #3 D:\xampp\htdocs\testno\VAPID.php (6): Minishlink\WebPush\VAPID::createVapidKeys() #4 {main} thrown in D:\xampp\htdocs\testno\vendor\web-token\jwt-core\Util\ECKey.php on line 98 .. ..... My second question is the value here, where should I get it from? For information, I am a Firebase subscriber I mean the value in the link... $report = $webPush->sendOneNotification( Subscription::create(json_decode('{"endpoint":"fcm.googleapis.com/fcm/send/eOmO_2Z-nHA:APA91bHDoFG8hTpuf11C9t_rVP2IOIOcpDimDLF06DYI9NtRPnQlpRN89KeLP2rl6w8C7WryiEPzkCg3XBwQxm hfL36JNMKGdtNSwd4UegS-7sByuGlYjg6FubHASYrrHVcTfefZaV9W","expirationTime":null,"keys":{"p256dh ":"BNBaksmindsZK9u_mghq-Omb1_9bN-hJVP8KjLWB6mlHPf_R3JLmyd-0LwYBGErAjItB2Pex6bAKYFFR_gDdYpo","auth":"H9M9HgHX4a3xmcChKQNWFA"}}',true)) , '{"title":"Hi from php" , "body":"php is amazing!" , "url":"./?message=123"}', ['TTL' => 5000]); print_r($report);

[@benixal]

Thanks for your comment, Abdul Hameed ! The error "Unable to create the key in ....\ECKey.php:98..." usually shows up when a needed tool called OpenSSL isn't turned on. To fix this in XAMPP: Open the php.ini file. Look for ;extension=openssl. Take out the semicolon before it. Save and restart XAMPP. If you don't have OpenSSL, you can use a website to make VAPID keys. Just search "generate VAPID keys." But remember, this is mainly for practice, not real projects For your second question: The subscription data comes when the user runs the enableNotif() function (14:20). The 'fcm' part you noticed is because Chrome uses FCM to send notifications, while if the user uses Firefox , it'll use 'services.mozilla.com'. You don't have to make the subscription data, like the endpoint or anything like that. Just use JSON.stringify (13:20), and then you can send notifications with it (18:08).

[@abdulhameednabhan5595]

Please what will this line look like can you write it for me? $report = $webPush->sendOneNotification( Subscription::create(json_decode('{"endpoint":"fcm.googleapis.com/fcm/send/eOmO_2Z-nHA:APA91bHDoFG8hTpuf11C9t_rVP2IOIOcpDimDLF06DYI9NtRPnQlpRN89KeLP2rl6w8C7WryiEPzkCg3XBwQxmhfL36JNMKGdtNSwd4UegS-7sByuGlYjg6FubHASYrrHVcTfefZaV9W","expirationTime":null,"keys":{"p256dh":"BNBaksmindsZK9u_mghq-Omb1_9bN-hJVP8KjLWB6mlHPf_R3JLmyd-0LwYBGErAjItB2Pex6bAKYFFR_gDdYpo","auth":"H9M9HgHX4a3xmcChKQNWFA"}}',true)) , '{"title":"Hi from php" , "body":"php is amazing!" , "url":"./?message=123"}', ['TTL' => 5000]);@@benixal

[@carlosgarciamorales1383]

Great video, thank you :)

[@carlosgarciamorales1383]

Excellent video