Firebase Send Push Notification JavaScript + PHP

Поділитися
Вставка
  • Опубліковано 13 січ 2025

КОМЕНТАРІ • 122

  • @MangoJellySolutions
    @MangoJellySolutions Рік тому +1

    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!

    • @benixal
      @benixal  Рік тому +1

      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! 🚀

  • @JohnSamuelchineme
    @JohnSamuelchineme 4 місяці тому +1

    Thank you for this video. I spent so much time trying to find this across documentations. This was straightforward and worked like a charm.

  • @MrZilcin
    @MrZilcin 7 місяців тому +1

    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.

    • @benixal
      @benixal  7 місяців тому +1

      Thank you for your kind words! I'm glad to hear the video helped you.

  • @jaimemartinez0078
    @jaimemartinez0078 Місяць тому

    Muchas gracias amigo!! Este fue el único video que me sirvió para habilitar las notificaciones a mi web Laravel.

  • @shubhrajit2117
    @shubhrajit2117 6 місяців тому +1

    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

  • @rWeizenmann
    @rWeizenmann 5 днів тому

    Sua explicação é ótima, faça mais vídeos assim. Parabéns

  • @sazzad362
    @sazzad362 Місяць тому

    Thanks, man! Clear and straightforward-just the way I like it.

  • @soner-san
    @soner-san 7 місяців тому +1

    What a wonderful tutorial, thank you for all your effort.👏

  • @AllriseX
    @AllriseX 2 місяці тому

    Dude your vid is so cool. You helped me a lot with refactoring PHP backend from legacy API to FCM v1

  • @yi-pinghuang3942
    @yi-pinghuang3942 6 місяців тому

    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.

  • @suthinthamsuwan1943
    @suthinthamsuwan1943 4 місяці тому

    Many many many thanks for this video 👍👍👍

  • @ShivamRanderi
    @ShivamRanderi 4 місяці тому +1

    thanks it's very easy and working and also latest

  • @marcolinoZero7
    @marcolinoZero7 11 місяців тому +1

    The best tutorial, muito obrigado meu amigo, você me ajudou demais!! ❤❤

    • @benixal
      @benixal  11 місяців тому +1

      Thank you so much! I'm glad the tutorial helped you! ❤️

  • @AhmedOumer-fm9cm
    @AhmedOumer-fm9cm 7 місяців тому

    What a wonderful tutorial, you save my weekend, you deserve a subscription.

    • @benixal
      @benixal  7 місяців тому +1

      Thank you so much! I'm glad I could help and thanks for subscribing!

  • @rafaelo1
    @rafaelo1 9 місяців тому +1

    Worked flawlessly, thank you

    • @benixal
      @benixal  9 місяців тому +1

      You're welcome! Great to hear!

  • @sonaliyewle
    @sonaliyewle 8 місяців тому +1

    This helps me a lot!!!! Thank you very much

    • @benixal
      @benixal  8 місяців тому +1

      You're welcome! 😊 Glad to hear it helped!

  • @Cat_ninj
    @Cat_ninj 3 місяці тому

    Thank you soo much, after searching many place, my code got worked as following your video, thank you

    • @benixal
      @benixal  2 місяці тому +1

      Thank you for your comment! I'm glad the video helped you.

    • @bekenetsoftware1593
      @bekenetsoftware1593 2 місяці тому

      Sir thank for the great video... please my token always expire and I will need to generate a new token for my notification to start working again..
      Please I need ur help​@@benixal

  • @hieunguyen8952
    @hieunguyen8952 8 місяців тому

    Thank you, bro! You save my day with the new Firebase Console and FCM library ❤

    • @benixal
      @benixal  8 місяців тому

      You're welcome, Glad I could help, thanks for your comment.

    • @hieunguyen8952
      @hieunguyen8952 8 місяців тому

      @@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.

    • @hieunguyen8952
      @hieunguyen8952 8 місяців тому

      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 :(

    • @benixal
      @benixal  8 місяців тому +1

      Glad to hear it's working for you now! 😃👏 sometimes system settings can be a bit of a struggle. Thanks for updating.

    • @alexnikolas4937
      @alexnikolas4937 8 місяців тому

      @@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

  • @abidunais2613
    @abidunais2613 5 місяців тому

    You saved my day 😍😍😍

    • @abidunais2613
      @abidunais2613 4 місяці тому +1

      It does not ask for notification permission

    • @benixal
      @benixal  4 місяці тому

      1. Check the console log for any errors
      2. Once granted, it won't ask for permission again. You can reset permissions in your browser settings if needed.

    • @abidunais2613
      @abidunais2613 4 місяці тому

      @@benixal Done, I checked it, when I reset the permission, it is showing as small snippet in the left corner , but not the alert box, But it is working fine,
      thanks any way🤟

  • @btomif
    @btomif 7 місяців тому +1

    thank you, it is work for me

    • @benixal
      @benixal  7 місяців тому +1

      Thanks for your comment! You're welcome!

  • @alexnikolas4937
    @alexnikolas4937 8 місяців тому +1

    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

  • @tresormalo5989
    @tresormalo5989 9 місяців тому +1

    Thx a lot ! You made my day !

    • @benixal
      @benixal  9 місяців тому +1

      You're welcome! Glad it helped

  • @helderfilho4724
    @helderfilho4724 2 місяці тому

    Thank You

  • @nicky77uk1
    @nicky77uk1 7 місяців тому +1

    Could this code be adapted to send the push notification to a device id in a android app?

    • @benixal
      @benixal  7 місяців тому +1

      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

  • @maeil2024
    @maeil2024 8 місяців тому +1

    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?

    • @benixal
      @benixal  8 місяців тому +1

      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.

    • @maeil2024
      @maeil2024 8 місяців тому

      @@benixal Thanks for the feedback. Can't wait for the upcoming video 🙌🏻

  • @debcal2
    @debcal2 11 місяців тому +2

    Thank you very much for this tutorial, can you Please inform how to send messages to multiple devices?

    • @benixal
      @benixal  10 місяців тому +1

      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

  • @alexwmb611
    @alexwmb611 8 місяців тому +1

    Thx a lot for your job ! Does it works even if the browser is close and not running in background ?

  • @focvs4838
    @focvs4838 Рік тому

    amazing job, thanks you!

    • @benixal
      @benixal  Рік тому

      You're welcome! I'm glad you found the video helpful.

  • @tresormalo5989
    @tresormalo5989 9 місяців тому +1

    I'm getting only id_token instead of access_token. Did i do something wrong ?

    • @benixal
      @benixal  9 місяців тому

      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?

  • @Basirafeef
    @Basirafeef 11 місяців тому +1

    Thanks for sharing great knowledge sir, please make a video on how to implement fcm in android using Java and php.

    • @benixal
      @benixal  11 місяців тому +1

      Thanks for your comment! I'm glad you found the video helpful,
      and for the Android, sure I will.

  • @hmed8997
    @hmed8997 8 місяців тому +1

    How can i swnd notification to multiple tokens?

    • @alexnikolas4937
      @alexnikolas4937 8 місяців тому

      I would really like to know this too

    • @hmed8997
      @hmed8997 8 місяців тому

      @@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

  • @mangacandota
    @mangacandota 4 місяці тому +1

    bro...how if multiple. we have many token of user devices...please

    • @OTsolov
      @OTsolov 2 місяці тому

      With this tutorial you can save FMC tokens in db. Then loop sending for each separately. There are many ways to do it with this tutorial. :)

  • @dijup
    @dijup 4 місяці тому

    Great tutorial! Is it possible to adapt this to work with multiple devices as well? Also, could you provide a brief overview of the "Subscribe to Topic" feature?

  • @aqibhanif4245
    @aqibhanif4245 6 місяців тому

    @benixal i getting issue when genrate tokken ..
    permission denied an error occue while retriving token

  • @MuhammadZen-z3m
    @MuhammadZen-z3m 6 місяців тому

    Thank you..

  • @kimgraa
    @kimgraa 9 місяців тому +1

    Great tutorial....does you have a tutorial for make it work on IOS too...

    • @benixal
      @benixal  9 місяців тому +1

      Thank you! I don't currently have a tutorial for iOS, but I can consider creating one in the future.

  • @TheRealNVT
    @TheRealNVT 4 місяці тому

    When my webpage is not in focus, notifications appear on the desktop (bottom right) is there anyway to turn this off

  • @hakannnn7553
    @hakannnn7553 3 місяці тому

    How can i swnd notification to multiple tokens? can you send a sample code

  • @danil_zz
    @danil_zz 5 місяців тому

    Your video was very helpfull. I'd fulfilled all migration tasks completely. There is 19 July 2024, tomorrow legacy will come rip.

  • @rWeizenmann
    @rWeizenmann День тому

    Estou com um problema, testei no Firefox e funcionou perfeitamente, mas no Google Chrome não, ele recupera o token e recebe as notificações mas o popup da notificação não aparece.
    Fiz de tudo, permiti as notificações e mesmo assim não funciona, sabe o que pode ser?

  • @tpatel81
    @tpatel81 4 місяці тому

    Can you tell which php extension you are using please..

    • @benixal
      @benixal  4 місяці тому

      PHP Intelephense

  • @gonzaloturconi4657
    @gonzaloturconi4657 4 місяці тому

    I have the same service worker but the event notificationclick doesn't trigger. I tried with fcm_options or action_click but is not working. Only works the push event...

    • @benixal
      @benixal  4 місяці тому

      Which browser are you using? Also, did you check the console logs in DevTools to see if there are any errors or if the notificationclick event is being fired

    • @gonzaloturconi4657
      @gonzaloturconi4657 4 місяці тому

      only works in edge but not in chrome

    • @gonzaloturconi4657
      @gonzaloturconi4657 4 місяці тому

      ​@@benixalI could resolve it, turns out notificationclick event in Chrome only fire in production, the code is the same. I don't know the reason, but it works now. Thanks for the video and for reply! Greetings

  • @skillpersian
    @skillpersian 6 місяців тому

    Hi, for CPANEL, there was a way to run without composer installation. I could not be a way?

    • @benixal
      @benixal  6 місяців тому

      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.

  • @sourav12rav
    @sourav12rav 6 місяців тому

    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?

    • @benixal
      @benixal  6 місяців тому +1

      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

    • @sourav12rav
      @sourav12rav 6 місяців тому

      @@benixal Yes I checked after. Thanks for the reply and its a great video.

  • @salmanarizki-b4w
    @salmanarizki-b4w Місяць тому

    sir, i have error
    Uncaught TypeError: array_key_exists(): Argument #2 ($array) must be of type array, null given

  • @jatin2829
    @jatin2829 10 місяців тому +1

    How can i get the new token if previous one expired? 🙏

    • @benixal
      @benixal  10 місяців тому +1

      Each time you run the `fetchAuthToken` it will fetch a fresh authentication token for you

  • @cypriano
    @cypriano 10 місяців тому +1

    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?

    • @benixal
      @benixal  10 місяців тому

      Thanks for your comment!
      Make sure that the URL is secure (starts with )

    • @cypriano
      @cypriano 10 місяців тому

      @@benixal sorry, dude. Im a noobie and did'nt understood what service workers are. I fixed this, everything worked. Thanks!

    • @benixal
      @benixal  10 місяців тому

      Glad to hear you got it sorted out! If you have any more questions, feel free to ask.

  • @kkrish_10
    @kkrish_10 9 місяців тому

    ❤❤

  • @nguyenphi-u1i
    @nguyenphi-u1i 10 місяців тому

    If i send message with topic param (replace for token param). Can I got notification on browser?

  • @itsallaboutlearning332
    @itsallaboutlearning332 9 місяців тому

    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.

    • @benixal
      @benixal  9 місяців тому

      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.

  • @HappyTechnofire
    @HappyTechnofire Місяць тому

    Brother I'm unable to generate token in mobile browsers it is working perfectly in PC but not in mobile 😑

  • @Codebyakshay
    @Codebyakshay 5 місяців тому

    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

  • @markpelayo8550
    @markpelayo8550 10 місяців тому

    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?

    • @alexnikolas4937
      @alexnikolas4937 8 місяців тому

      Could it be something to do with the browser settings? I couldn't get it to work on Chrome, but on Firefox everything works

  • @ayaaa3112
    @ayaaa3112 5 місяців тому

    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??

    • @benixal
      @benixal  5 місяців тому

      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.

    • @ayaaa3112
      @ayaaa3112 5 місяців тому

      @@benixal last week, notification was working perfectly. but this week its not working anymore it shown an error "No notification data found!" in service-worker.js. do you know why?

  • @SecBug
    @SecBug 11 місяців тому +1

    thank you for this amazing tutorial! 🤍

    • @benixal
      @benixal  11 місяців тому +1

      You’re welcome, Happy to help!😊

  • @frestalink
    @frestalink 4 місяці тому

    Please make a video on this topic "Firebase Send Push Notification Android + PHP"

  • @abrahimalyafai4390
    @abrahimalyafai4390 8 місяців тому

    Can I contact you?

  • @aebusleiman
    @aebusleiman 10 місяців тому

    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

    • @benixal
      @benixal  10 місяців тому +1

      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

    • @aebusleiman
      @aebusleiman 10 місяців тому

      drive.google.com/file/d/1EH0PlAqY6GG2CWuucwG0SgmTPDD-vSX3/view

  • @jaxxrr
    @jaxxrr 11 місяців тому

    I want to send it to my android phone ...

  • @tubica_de
    @tubica_de Місяць тому

    the terminal thing doesnt work help
    Edit: I didn't use ssh💀

    • @tubica_de
      @tubica_de Місяць тому

      help

    • @tubica_de
      @tubica_de Місяць тому

      I wasted an hour of my life on this and now this?? WTF bro

    • @tubica_de
      @tubica_de Місяць тому

      why did you do this to me

    • @tubica_de
      @tubica_de Місяць тому

      wie kann man nur so asozial sein alter ich hasse dich man

    • @benixal
      @benixal  Місяць тому

      What error did you get ?

  • @sonaliyewle
    @sonaliyewle 8 місяців тому

    showNotification not working in chrome

    • @benixal
      @benixal  8 місяців тому

      Could you clarify the specific error you're seeing when using showNotification in chrome ?

    • @alexnikolas4937
      @alexnikolas4937 8 місяців тому

      I also had problems on chrome but after I updated it the problem disappeared

    • @sonaliyewle
      @sonaliyewle 8 місяців тому

      @@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.

  • @Mateus-ug9cl
    @Mateus-ug9cl 8 місяців тому

    Niceeeeeee 🫶🫶🫶🫶

  • @MinhAppWeb
    @MinhAppWeb 6 місяців тому

    Thanks you...