After extensively searching through numerous posts, I have been unsuccessful in achieving my goal with version 9.6.1
I receive a notification on my Windows notification bar. My objective is to log the message in the console and then take action based on it.
Requirement: When a message is sent to the client using the token from the server, that specific client should receive the data and based on that data, I intend to display a custom popup/modal. Can this be done using FCM?
Below is the configuration I set up on a page.
<script type="module">
// Import the necessary functions from the required SDKs
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
import {getToken,onMessage} from "https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js";
import {getMessaging,onBackgroundMessage } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging-sw.js";
console.log(Notification.permission);
if (Notification.permission == 'granted') {
loadFCM();
}
function loadFCM(p){
console.log(p);
// TODO: Add SDKs for Firebase products that you want to use
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "esdfdsgdsg",
authDomain: "sdgsdgsdg",
projectId: "sgsdgsdgds",
storageBucket: "sgdsgdsgds",
messagingSenderId: "sdgdsgsdg",
appId: "1:sgdgs:web:sgdgdsg",
measurementId: "G-sgdgdsdg"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
console.log(messaging);
getToken(messaging, { vapidKey: 'sdgdsgsd-sdgdgsdggds' }).then((currentToken) => {
if (currentToken) {
console.log('token to send...'+currentToken);
} else {
// Show permission request UI
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
messaging.setBackgroundMessageHandler(payload => {
console.log(payload);
const title = payload.data.title;
const options = {
body: payload.data.score
};
return self.registration.showNotification(title, options);
});
});
onBackgroundMessage(messaging, (payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle, notificationOptions);
});
}
</script>
Using Postman, I made the following request. Can someone help me identify what I might be doing wrong?
URL POST : https://fcm.googleapis.com/fcm/send
{
"data": {
"title": "test",
"body": "test",
"click_action": "http://localhost:8001/"
},
"webpush": {
"fcm_options": {
"link": "https://domain.in"
}
},
"notification":{
"title":"mytitle",
"body":"mybody",
"content_available": true },
"to": "dMNS-tergdrgd-PPMcqiCseoE3fLIQYAL9KbCxlnKcN2yQ1VV" }