0

I have an app that is running on firebase BaaS. I need to send notifications to a specific user when an action occur and at the same time retrive the notification to display it.

I've followed some guide and the documentations to implement it in my service worker and I was able to get a notification logged in console with this code when using the firebase console.


importScripts('https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.1.3/firebase-messaging-compat.js');

firebase.initializeApp({
    apiKey: "...",
    authDomain: "...firebaseapp.com",
    databaseURL: "https://...-default-rtdb.firebaseio.com",
    projectId: "...",
    storageBucket: "...appspot.com",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.onBackgroundMessage( (payload) => {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here for 'data' key
    let { data } = payload
    if( data && data.title && data.body ) {
        const notificationTitle = data.title || 'Test title';
        const notificationOptions = {
            body: data.body || 'Test body',
        };
  
        self.registration.showNotification(notificationTitle, notificationOptions);
    }
});
  
self.addEventListener('notificationclick', (event) => {
    let { notification } = event;
    // this event will not be occoured by notication of FCM 'notification' key
    console.log('[firebase-messaging-sw.js]  Notification clicked: ', event);
    notification.close()
});

Since the final user will not have access to the firebase FCM console, how I can add the ability to send a notification from my vue app, and how I can retrive it when a notification is recived?

user9741470
  • 169
  • 12
  • 1
    *firebaser here* Calls to the FCM REST API to *send* messages require that you specify the FCM *server** key in your code. As its name implies, this key should only be used in server-side code, or in an otherwise trusted environment. The reason for this is that anyone who has the FCM server key can send whatever message they want to all of your users. If you were to include this key in your client-side web app, a malicious user can find it and you'd be putting your users at risk. See https://stackoverflow.com/a/37993724 for a better solution. – Frank van Puffelen May 30 '22 at 19:51
  • @FrankvanPuffelen if I implement an endpoint on my server or a cloud function, will this possible?Also I'm unable to display the notification during development in localhost, maybe my code is wrong? – user9741470 May 30 '22 at 20:33
  • 1
    It could be that your code is wrong, but that seems unrelated to the sending of messages. And yes, if you put a custom endpoint on your own server or in some serverless system, you can indeed call that from your app and send messages that way. Be sure to secure the endpoint in that case, to prevent that folks can send just any message they want to all other users. – Frank van Puffelen May 30 '22 at 20:39
  • Is there any good resources that can help me to figure out how to achive this? I've found a lot of guides but each guide use different ways or is outdated – user9741470 May 30 '22 at 21:33
  • The question I linked has the latest links. If you tried to make those work but ran into problems, I recommend opening a new question with the [minimal code that reproduces where you got stuck](http://stackoverflow.com/help/mcve). – Frank van Puffelen May 30 '22 at 22:59

0 Answers0