Firebase Send Push Notification JavaScript + PHP

Поделиться
HTML-код
  • Опубликовано: 25 дек 2024

Комментарии • 120

  • @MangoJellySolutions
    @MangoJellySolutions 11 месяцев назад +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  11 месяцев назад +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 3 месяца назад +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 6 месяцев назад +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  6 месяцев назад +1

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

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

  • @AllriseX
    @AllriseX Месяц назад

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

  • @sazzad362
    @sazzad362 Месяц назад

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

  • @jaimemartinez0078
    @jaimemartinez0078 23 дня назад

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

  • @yi-pinghuang3942
    @yi-pinghuang3942 5 месяцев назад

    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.

  • @soner-san
    @soner-san 7 месяцев назад +1

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

  • @Cat_ninj
    @Cat_ninj 2 месяца назад

    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

  • @suthinthamsuwan1943
    @suthinthamsuwan1943 3 месяца назад

    Many many many thanks for this video 👍👍👍

  • @alexnikolas4937
    @alexnikolas4937 7 месяцев назад +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

  • @AhmedOumer-fm9cm
    @AhmedOumer-fm9cm 6 месяцев назад

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

    • @benixal
      @benixal  6 месяцев назад +1

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

  • @rafaelo1
    @rafaelo1 8 месяцев назад +1

    Worked flawlessly, thank you

    • @benixal
      @benixal  8 месяцев назад +1

      You're welcome! Great to hear!

  • @hieunguyen8952
    @hieunguyen8952 7 месяцев назад

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

    • @benixal
      @benixal  7 месяцев назад

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

    • @hieunguyen8952
      @hieunguyen8952 7 месяцев назад

      @@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 7 месяцев назад

      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  7 месяцев назад +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 7 месяцев назад

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

  • @ShivamRanderi
    @ShivamRanderi 3 месяца назад +1

    thanks it's very easy and working and also latest

  • @sonaliyewle
    @sonaliyewle 7 месяцев назад +1

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

    • @benixal
      @benixal  7 месяцев назад +1

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

  • @abidunais2613
    @abidunais2613 4 месяца назад

    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🤟

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

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

  • @tresormalo5989
    @tresormalo5989 8 месяцев назад +1

    Thx a lot ! You made my day !

    • @benixal
      @benixal  8 месяцев назад +1

      You're welcome! Glad it helped

  • @debcal2
    @debcal2 10 месяцев назад +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

  • @marcolinoZero7
    @marcolinoZero7 10 месяцев назад +1

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

    • @benixal
      @benixal  10 месяцев назад +1

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

  • @btomif
    @btomif 6 месяцев назад +1

    thank you, it is work for me

    • @benixal
      @benixal  6 месяцев назад +1

      Thanks for your comment! You're welcome!

  • @aqibhanif4245
    @aqibhanif4245 5 месяцев назад

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

  • @maeil2024
    @maeil2024 7 месяцев назад +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  7 месяцев назад +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 7 месяцев назад

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

  • @alexwmb611
    @alexwmb611 8 месяцев назад +1

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

  • @nicky77uk1
    @nicky77uk1 6 месяцев назад +1

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

    • @benixal
      @benixal  6 месяцев назад +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

  • @kimgraa
    @kimgraa 8 месяцев назад +1

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

    • @benixal
      @benixal  8 месяцев назад +1

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

  • @tresormalo5989
    @tresormalo5989 8 месяцев назад +1

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

    • @benixal
      @benixal  8 месяцев назад

      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?

  • @itsallaboutlearning332
    @itsallaboutlearning332 8 месяцев назад

    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  8 месяцев назад

      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.

  • @mangacandota
    @mangacandota 3 месяца назад +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. :)

  • @hakannnn7553
    @hakannnn7553 3 месяца назад

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

  • @TheRealNVT
    @TheRealNVT 3 месяца назад

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

  • @skillpersian
    @skillpersian 5 месяцев назад

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

    • @benixal
      @benixal  5 месяцев назад

      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.

  • @focvs4838
    @focvs4838 11 месяцев назад

    amazing job, thanks you!

    • @benixal
      @benixal  11 месяцев назад

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

  • @salmanarizki-b4w
    @salmanarizki-b4w Месяц назад

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

  • @dijup
    @dijup 3 месяца назад

    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?

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

  • @hmed8997
    @hmed8997 8 месяцев назад +1

    How can i swnd notification to multiple tokens?

    • @alexnikolas4937
      @alexnikolas4937 7 месяцев назад

      I would really like to know this too

    • @hmed8997
      @hmed8997 7 месяцев назад

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

  • @nguyenphi-u1i
    @nguyenphi-u1i 9 месяцев назад

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

  • @jatin2829
    @jatin2829 9 месяцев назад +1

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

    • @benixal
      @benixal  9 месяцев назад +1

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

  • @tpatel81
    @tpatel81 3 месяца назад

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

    • @benixal
      @benixal  3 месяца назад

      PHP Intelephense

  • @helderfilho4724
    @helderfilho4724 Месяц назад

    Thank You

  • @gonzaloturconi4657
    @gonzaloturconi4657 3 месяца назад

    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  3 месяца назад

      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 3 месяца назад

      only works in edge but not in chrome

    • @gonzaloturconi4657
      @gonzaloturconi4657 3 месяца назад

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

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

  • @sourav12rav
    @sourav12rav 5 месяцев назад

    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  5 месяцев назад +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 5 месяцев назад

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

  • @frestalink
    @frestalink 3 месяца назад

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

  • @ayaaa3112
    @ayaaa3112 4 месяца назад

    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  4 месяца назад

      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 4 месяца назад

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

  • @markpelayo8550
    @markpelayo8550 9 месяцев назад

    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 7 месяцев назад

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

  • @HappyTechnofire
    @HappyTechnofire 23 дня назад

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

  • @kkrish_10
    @kkrish_10 9 месяцев назад

    ❤❤

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

  • @MuhammadZen-z3m
    @MuhammadZen-z3m 6 месяцев назад

    Thank you..

  • @abrahimalyafai4390
    @abrahimalyafai4390 8 месяцев назад

    Can I contact you?

  • @sonaliyewle
    @sonaliyewle 7 месяцев назад

    showNotification not working in chrome

    • @benixal
      @benixal  7 месяцев назад

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

    • @alexnikolas4937
      @alexnikolas4937 7 месяцев назад

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

    • @sonaliyewle
      @sonaliyewle 7 месяцев назад

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

  • @jaxxrr
    @jaxxrr 10 месяцев назад

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

  • @tubica_de
    @tubica_de 18 дней назад

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

    • @tubica_de
      @tubica_de 18 дней назад

      help

    • @tubica_de
      @tubica_de 18 дней назад

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

    • @tubica_de
      @tubica_de 18 дней назад

      why did you do this to me

    • @tubica_de
      @tubica_de 18 дней назад

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

    • @benixal
      @benixal  16 дней назад

      What error did you get ?

  • @Mateus-ug9cl
    @Mateus-ug9cl 8 месяцев назад

    Niceeeeeee 🫶🫶🫶🫶

  • @SecBug
    @SecBug 10 месяцев назад +1

    thank you for this amazing tutorial! 🤍

    • @benixal
      @benixal  10 месяцев назад +1

      You’re welcome, Happy to help!😊

  • @MinhAppWeb
    @MinhAppWeb 5 месяцев назад

    Thanks you...