Vue send push notification with Firebase

see how to send push notification to browser with Firebase cloud messaging or FCM in Vue js
Vue app source : github.com/benixal/vue-fireba...
admin.js : gist.github.com/benixal/259b4...
00:00:09 create Firebase project
00:00:33 create a web app in Firebase console
00:00:43 create new Vue app
00:02:24 getToken
00:03:12 get VAPID KEY
00:04:04 service worker
00:04:44 get message in forground
00:05:16 setup service worker
00:07:35 send test message
00:09:13 send notifications from server

[@ablegreimerguzmanperez7250]

Salvaste mi vida, mi carrera universitaria, todo viejo... MUCHAS GRACIAS!!!

[@benixal]

Thank you so much for your kind words! I'm glad the video was helpful to you.

[@gapboi6044]

Thank you so much! I've watched many videos and could not understand how to do this with firebase's docs

[@benixal]

Thank you for your kind words! I'm glad you found the video helpful.

[@tyresewatchthis8025]

Bro you have no idea how much you helped me. Thanks a lot, I subscribed, please make more Vue.js + Firebase videos

[@benixal]

Thank you so much! I'm glad the video helped you. More Vue.js + Firebase content is on the way, so stay tuned! 🚀

[@chill-hot-stream]

nice tutorial it helped me today with nuxt3 integration

[@benixal]

Thanks for your comment, Glad it helped 😀 👍

[@kaliloteixeira2089]

Does it works in PWA's? Using VUE 2.

[@kennyjeancarloarevaloreyes6976]

The notifications in the foreground and according to the plan only reach me through the console, everything is fine, but the notification window is not shown and when I close the page the sale does not appear, what is the reason?

[@Mewain]

You are the boss ! thank you

[@benixal]

Thank you so much! I'm glad the video was helpful for you.

[@yazidakbar5373]

THANK YOUUUU LOVE YOU BROOOO 💥💥💥💥💥💥💥

[@benixal]

Thanks! 🙌 Glad the video was useful to you.

[@user-od2xf7ng7i]

Thanks so much!

[@benixal]

You're welcome!

[@hieuNguyen-om8sg]

thank you so much for the guide, i got it to work the same as you at 9:15 but my project uses laravel as back-end so is there a code or place you know that i can read up on how to set up on that side ? im using axios to connect between the two, the firebase setting does not have code for php it would seems

[@benixal]

Thanks for your comment, I'm glad it was helpful! I think there is no official Firebase Admin SDK for PHP. Instead, you need to use REST: firebase.google.com/docs/reference/fcm/rest/v1/projects.messages/send You can use cURL in PHP to interact with it Check out this Gist: gist.github.com/benixal/59c5be11d1f67502698decf0c80e2cf2

[@MarcosGrandesso]

awesome thanks

[@benixal]

Thanks! 😊👍

[@user-lc5xi9zs7v]

Thank you from here to sky

[@benixal]

Thank you for your comment, I'm glad you found the video helpful.

[@MrBoXon]

Thank you, finally managed to get this to work! Is there any way to toggle a "Heads up" notification on Android devices? I can see it in my notification center, but currently it doesnt generate a popup notification or show on lock screen. Any idea? :)

[@Mewain]

i guess you need to run it on standalone mode (pwa installed on the device)

[@focus9454]

you are a god friend

[@benixal]

Thank you! I'm glad the video was helpful to you.

[@PkStarstormAlfa]

background notifications aren't showing up, I get the console log when I focus the page, but no notification popup

[@benixal]

Firebase service worker does not show background notifications when the page is focused. Try using this simple javascript service worker: gist.github.com/benixal/80440dcec49f71c4423f428e27e7ad6f#file-firebase-messaging-sw-js

[@bryancan]

This is great, thanks. Now what if I want to use Capacitor to turn this Vue.js app into an ios/android mobile app? Will it just work, or is there an entirely different process?

[@benixal]

Thank you! I'm not familiar with Capacitor , I'm not sure

[@04Condor]

worked for you with a capacitor?

[@antohagobet4451]

same question "worked for you with a capacitor?" i'm doing app with vue.js (capacitor) do you find any solution to send push notification via firebase?

[@ameename4425]

@@benixal you are currently running in browser. What if we build an android .apk file and install apk in my mobile. Will the notification still be sent?

[@muhammadalbab2678]

do you know why this method only works on chrome? i tested on safari and firefox they both don't work

[@benixal]

For Firefox: "I tested this method on Firefox and did not encounter any issues. Could you please provide more information on the error you are seeing in the console?" For Safari: "The push API may not work on older versions of Safari. To send push notifications on Safari, you may need to use the Apple Push Notification Service (APNs). However, according to Apple, Safari 16 and newer versions will support the push API. I have not tested this yet." firebase.google.com/docs/web/environments-js-sdk#browsers caniuse.com/push-api

[@muhammadalbab2678]

@@benixal thanks for the reply, my bad. on firefox its probably because i tested it on localhost still, i read somewhere it says has to be on https. thanks

[@LoVe-iu9rd]

Is target tocken is for only one user or all users ?

[@benixal]

Each token is only for one user , but if you want to send message to all users , you can send it to topics : firebase.google.com/docs/cloud-messaging/js/topic-messaging

[@LoVe-iu9rd]

@@benixal thank you

[@moali6657]

hi is it safe to put the file in public where the file has the FCM keys?

[@benixal]

Hi! Yes, it's safe to put the file with the public VAPID key in public. Just remember to keep the private key secure and never share it publicly.

[@moali6657]

@@benixal thanks

[@blalmal10a]

@@benixal Sir, is it safe to include the firebase config in service worker?

[@benixal]

Yes, it's safe The Firebase config, including apiKey, identifies your project; it's not a security risk if known. stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public firebase.google.com/docs/cloud-messaging/js/receive?hl=en&authuser=0#web-namespaced-api

[@Mewain]

The notification doesn't seems to be received on ios. (standalone/fullscreen mode) Do you know why ?

[@benixal]

Thanks for letting me know. I haven't tested it on iOS yet.

[@Mewain]

This is working everywhere, except on ios :(@@benixal

[@tiagofarias-ti]

Perfect

[@benixal]

You're welcome! 🙌

[@hungha9991]

Hi, thank for your share - thank you very much, i did it, but i have one question, if i standing at localhost web then send noti, i cant get noti instead firebase-admin already push, buts if i go to other url then i get noti, Did i do something wrong ? Many thank you

[@benixal]

Hi thanks for your comment , your welcome! that's because the Firebase default service worker does not show background notifications when the page is focused. (Instead, it sends a payload directly to your app) and you need to handle the display within your application: onMessage(messaging, (payload) => { console.log('Message received. ', payload); // Display the message using your app's elements. // For example, pop a div or use other UI elements. }); However if you want to show push notifications even when the user is on the focused screen, Try using this simple javascript service worker instead of what I did in video: gist.github.com/benixal/80440dcec49f71c4423f428e27e7ad6f#file-firebase-messaging-sw-js (don't forget to clear the browser cache or update the service worker through devtools for the changes to take effect)