Firebase Send Push Notification JavaScript + PHP
HTML-код
- Опубликовано: 3 авг 2024
- See how to send push notifications using Firebase Cloud Messaging (FCM) using JavaScript (Web) and PHP
HTML & JS source: github.com/benixal/FCM-Web-No...
PHP source: github.com/benixal/FCM-PHP-No...
00:00:00 Intro
00:00:26 setup firebase for html page
00:04:04 Generate key pair (VAPID public key)
00:06:12 register service worker
00:13:01 get token
00:13:44 send a test message to the token
00:16:22 send to API using php (cURL)
tysm buddy 💖
At 15:30 to open your desired url, just send a link or url data field from firebase console (see in additional options) and in your service worker use that (data.url or something else) instead of notif.click_action
Teşekkür ederim kardeşim, çok iyi bir anlatım. Günlerce çalışan bir kod bulamamıştım, ilk defa bir videoda anlatılanlar çalıştı. Genelde videoyu çeken arkadaş yapıyor ama biz yapınca çalışmıyordu. Şuan harika çalışıyor. Tekrar teşekkür ederim.
Thank you for your kind words! I'm glad to hear the video helped you.
Your video was very helpfull. I'd fulfilled all migration tasks completely. There is 19 July 2024, tomorrow legacy will come rip.
Thank you very much for your video demonstration, it was a great help to me! In the video, send.php used the link to send the URL, and in sw.js, the hyperlink value is click_action. In practice, the notif indeed has the click_action value.
What a wonderful tutorial, thank you for all your effort.👏
The best tutorial I've ever seen. I'm very interested in whether it is possible to send a message to several recipients at one request
Keep them coming my friend, as a content creator myself and teaching on youtube I can say from experience that your videos are amazing to get the content across. I am using these at work to help get certain things up and running on our systems and yours are straight to the point. Please keep going, the first 1K subscribers are the hardest then they just keep coming. Your doing an amazing job!
Thank you so much for the encouraging words! I'm glad you find the videos helpful. Your support means a lot, and I'll definitely keep creating content. Cheers to reaching that 1K milestone and beyond! 🚀
Worked flawlessly, thank you
You're welcome! Great to hear!
What a wonderful tutorial, you save my weekend, you deserve a subscription.
Thank you so much! I'm glad I could help and thanks for subscribing!
This helps me a lot!!!! Thank you very much
You're welcome! 😊 Glad to hear it helped!
Thx a lot ! You made my day !
You're welcome! Glad it helped
thank you, it is work for me
Thanks for your comment! You're welcome!
Thanks you...
Thank you, bro! You save my day with the new Firebase Console and FCM library ❤
You're welcome, Glad I could help, thanks for your comment.
@@benixalI tried your HTML code, just replace the firebaseConfig and vapidKey with my project info but the localhost does not receive any notification. Do you know what is the potential problem or I need to deploy the code to a HTTPS domain?
Thank you for your help.
It worked for me now. Your code's just fine, the problem is the system notifications was disabled by the fault for all apps including Google Chrome in MacOS. It takes a day to figure out :(
Glad to hear it's working for you now! 😃👏 sometimes system settings can be a bit of a struggle. Thanks for updating.
@@hieunguyen8952 When I tried on a http domain I got an error in the browser console (FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK. When I checked on a https domain, everything worked fine
amazing job, thanks you!
You're welcome! I'm glad you found the video helpful.
The best tutorial, muito obrigado meu amigo, você me ajudou demais!! ❤❤
Thank you so much! I'm glad the tutorial helped you! ❤️
Thanks for sharing great knowledge sir, please make a video on how to implement fcm in android using Java and php.
Thanks for your comment! I'm glad you found the video helpful,
and for the Android, sure I will.
Thank you..
Thank you very much for this tutorial, can you Please inform how to send messages to multiple devices?
Thanks for your comment! You're welcome!
I haven't tried that, but you can check out this: firebase.google.com/docs/cloud-messaging/js/device-group
One liner - You are great and you made my day.. I am able to achieve with your code... Words are not enough..
Things I want to achieve is sending FCM Messages to my mobile app. I am unable to find how to implement in my laravel project.
Your explanation has helped me and my concepts got clear... Thank you one more time..
Do you have any video which you can suggest for Firebase Deeplink also.. Thanks in advance.
Thanks a lot for your feedback! Glad the tutorial was helpful. But I don't have the "Firebase Deeplink" video yet, but I'll keep it in mind for future content.
❤❤
Thx a lot for your job ! Does it works even if the browser is close and not running in background ?
Great tutorial....does you have a tutorial for make it work on IOS too...
Thank you! I don't currently have a tutorial for iOS, but I can consider creating one in the future.
Niceeeeeee 🫶🫶🫶🫶
Thanks for the awesome tutorial.
One question.
It is possible to implement firebase multicast using php where we only sent a single api request to firebase for multiple targeted audience/devices/topic?
Thanks for your comment! , Glad it was helpful!
I haven't tried Firebase Multicast yet, but I know you can send messages to topics:
`message": {
"topic": "matchday",
"notification": {
"title": "Background Message Title",
"body": "Background message body" ....`
firebase.google.com/docs/cloud-messaging/js/send-multiple?hl=en&authuser=0#handle_messages_when_your_web_app_is_in_the_background
and as far as I understand, for (web/javascript) you need to subscribe each token to a topic by using this api: `iid.googleapis.com`
I will try, and if successful, I'll create a video about it.
@@benixal Thanks for the feedback. Can't wait for the upcoming video 🙌🏻
Great tutorial, easy to follow. I made it work on the first time but when testing it on safari, it doesn't work. Any idea how to make it work on safari?
Could it be something to do with the browser settings? I couldn't get it to work on Chrome, but on Firefox everything works
If i send message with topic param (replace for token param). Can I got notification on browser?
I'm getting only id_token instead of access_token. Did i do something wrong ?
Thanks for reaching out. The "$credential->fetchAuthToken" method generates an access_token, not an id_token. Could you clarify where you expected to get the ID token from?
@benixal i getting issue when genrate tokken ..
permission denied an error occue while retriving token
Hi, for CPANEL, there was a way to run without composer installation. I could not be a way?
Hi, you don't need Composer on your CPanel. You just need PHP. You can install the dependencies locally, compress your PHP files (including the vendor folder), and upload them to your server.
Could this code be adapted to send the push notification to a device id in a android app?
Yes, you can use the token received by the "onNewToken" method in your Android app to send push notifications (using PHP) to that device.
firebase.google.com/docs/cloud-messaging/android/client#monitor-token-generation
How can i swnd notification to multiple tokens?
I would really like to know this too
@@alexnikolas4937 I found a way to that but in my code that I wrote I sent curl request to each token. I want to know if I can send notification to multiple token with only one curl request or not? If you find a way share with me
Thanks man! But, with the code in php i cant send with the link. I tried every fcm_options i found (fcmOptions and a bunch of variantions). Can you help?
Thanks for your comment!
Make sure that the URL is secure (starts with )
@@benixal sorry, dude. Im a noobie and did'nt understood what service workers are. I fixed this, everything worked. Thanks!
Glad to hear you got it sorted out! If you have any more questions, feel free to ask.
I want to send it to my android phone ...
hey man can u help me get rid of this message ?
notifications/:56 An error occurred while retrieving token: DOMException: Registration failed - push service error
Hello friend, thank you very much! The end from send.php does not work for me, it does not give me an error, but it does not send either
Hey there! You're welcome! Make sure your service worker is activated and running. Go to DevTools (Right click on page and Inspect) -> Application tab -> Service Workers
drive.google.com/file/d/1EH0PlAqY6GG2CWuucwG0SgmTPDD-vSX3/view
i got this error when running "php send.php"
cURL error 60: SSL certificate problem: unable to get local issuer certificate
what should i do??
Date and Time: Make sure your computer’s date and time are set correctly.
Firewall: Check your firewall settings to make sure they’re not blocking anything.
Proxy: If you’re using a proxy, make sure it’s set up correctly.
How can i get the new token if previous one expired? 🙏
Each time you run the `fetchAuthToken` it will fetch a fresh authentication token for you
foreground message is not coming. I add the onMessage function but message is not coming. Only back groubd message I am receiving. What may be the issue?
I think the issue might be because in the video I used a custom service worker that is only for receiving push notifications. To receive messages using the onMessage function when the web application is in the foreground, you need to use Firebase's default service worker.
Clear the content of sw.js file completely and replace it with this (don't forget to clear cache):
importScripts('www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');
firebase.initializeApp({
apiKey: 'your-api-key',
authDomain: 'your-project-id.firebaseapp.com',
projectId: 'your-project-id',
storageBucket: 'your-project-id.appspot.com',
messagingSenderId: 'yoursender-id',
appId: 'your-app-id',
measurementId: 'your-G-measurement-id',
});
const messaging = firebase.messaging();
source: firebase.google.com/docs/cloud-messaging/js/receive#web_5
@@benixal Yes I checked after. Thanks for the reply and its a great video.
Can I contact you?
showNotification not working in chrome
Could you clarify the specific error you're seeing when using showNotification in chrome ?
I also had problems on chrome but after I updated it the problem disappeared
@@benixal I received a real-time notification object but it's not displayed on the browser. There is no error shown in the browser console.
thank you for this amazing tutorial! 🤍
You’re welcome, Happy to help!😊