Vue send push notification with Firebase

hey everyone this is Ben let's see how we can send push notification to our view JS app by using Firebase Cloud messaging or fcm let's do it first go to the Firebase console and create a new project then create a web app okay now create a new view.js app and open it in vs code all right now install Firebase on it copy all these configs and add it to the app but now I don't need Analytics and let me remove these comments okay let's see Firebase Cloud messaging documents here in this menu select web and JavaScript and set up a JavaScript client look for access the registration token and use this first we need to get a token by get token method so copy this and move this to top thank you and we need a public web ID key go to the console and go to Project settings Cloud messaging and generate a key and this is our public web ID key now we can get token by using get token method and here we must save it in our backend server but now I just use console like now we need a service worker and place it in the root of our app domain and here says the file name should be this so created in the public folder we can leave it empty for now go back to documents and go to receive messages and here first setup message handling for when our app is in the foreground and focused we need this and put it here and also import it okay now we need to set up our service worker or when our app is in the background or even closed but now we must use namespaced version because the service worker is a route.js file in public folder and vit does not build it now again we need our Firebase app config here now use on background message all right this is our message payload and here is the notification title and we can get it from payload dot notification dot title and this is the notification party and here is the notification icon and we can use any type of image file for it let's run our app okay if the user allows notification then Firebase will generate a token and we can use this token for send message to this user let's send our first message in the console go to all products and look for Cloud messaging click on create first campaign and notification here enter title and body then click on send test message and paste the token here it works and because our app is in the foreground and focused service worker send the message to unmessage method and here we can update the UI but if our app is in the background service worker will send a notification or even our app is closed it also works now let's see how to send notifications from a backend server go back to the console and in the project settings go to service accounts tab and here you can see that we can create our Firebase admin app with these languages I select node.js just copy this and also generate a private key I create my admin app here and use my private key let's see the documents go to server environments and build send requests send messages to specific devices and here you can see the documents for these languages I just copy this I just want to send a simple text notification so I don't need this Define notification object here and Define title and body we can also add a link to our notification click action here in documents look or link and just use this and let me change this because this path does not exist now we just need the target token but we must make some changes here because it seems that the example we copied from the console is a bit old but it is not a problem and also we need to install Firebase admin from npm and let's run it well our message was received and if our app is closed it also works and when user clicks on it the link will open in the link of the source code of this project is in the caption of this video

Channel: benixal

Views: 12,135

Keywords: vue, push notification, notification, firebase push notification, fcm, firebase cloud messaging, vue js, javascript, service worker, firebase-messaging-sw.js, firebase-admin, javascript framework, webpush, browser push notification, fcm push notification, Firebase, console.firebase.google.com, firebase console, getToken(), VAPID, VAPID_KEY, vite, vitejs

Id: nTJP2q2NIwM

Length: 12min 52sec (772 seconds)

Published: Sat Feb 25 2023