Develop Reference

Not receving notification by onMessage and OnonBackgroundMessage in firebase cloud messaging

I am trying to integrate firebase cloud messaging for notifications, I have added a firebase configure file in App.js and add a service worker (firebase-messaging-sw.js) file in the root (public folder).
while heating an API "https://fcm.googleapis.com/fcm/send", I am getting a message, but it only receives in the background and in the notification, it is not sowing any data, that I have sent by API, It sends just a message "The site has been updated in the background"
file app.js
const firebaseConfig = {
apiKey: "AIz.........................",
authDomain: "firebase project",
projectId: "projectId......",
storageBucket: "storageBucket........",
messagingSenderId: "5487851245788....",
appId: "546497946497995....",
measurementId: "D-54646464646446",
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
console.log("messaging: ", messaging)
const VapidKey = "BK08o6mE9WMPK5Wovhkn-..............."
const subscribe = () => {
Notification.requestPermission().then((permission) => {
console.log("permission: ", permission);
if (permission === "granted") {
firebaseToken(messaging, { vapidKey: VapidKey }).then((currentToken) => {
console.log("CurrentToken firebase: ", currentToken);
storeFirebaseToken(currentToken)
}).catch((err) => {
console.log("err: ", err)
})
}
})
}
useEffect(() => {
subscribe();
}, [])
file firebase-messaging-sw.js
import { initializeApp } from "firebase/app";
import { getMessaging, onMessage} from "firebase/messaging/sw";
import { onBackgroundMessage } from "firebase/messaging/sw";
const firebaseConfig = {
apiKey: "AIz.........................",
authDomain: "firebase project",
projectId: "projectId......",
storageBucket: "storageBucket........",
messagingSenderId: "5487851245788....",
appId: "546497946497995....",
measurementId: "D-54646464646446",
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
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);
});
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
// ...
});
I have added Onmessage and background methods in firebase-messaging-sw.js file, but I am not getting in that method,
I am expecting to receive a notification with title and icon and want to implement a click function on that

Js/Firebase - Unable to receive notification

Here is my code:
<script src="/js/firebase.js" type="module"></script>
firebase.js:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js";
import { getMessaging, getToken} from "https://www.gstatic.com/firebasejs/9.16.0/firebase-messaging.js";
import { onBackgroundMessage } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-messaging-sw.js";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const bbFirebase = initializeApp(firebaseConfig);
const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, { vapidKey: 'MY_KEY_HERE' }).then((currentToken) => {
if (currentToken) {
console.log("TOKEN: " + 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);
// ...
});
onBackgroundMessage(messaging, (payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
function requestPermission() {
console.log('Requesting permission...');
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');
// TODO(developer): Retrieve a registration token for use with FCM.
// In many cases once an app has been granted notification permission,
// it should update its UI reflecting this.
resetUI();
} else {
console.log('Unable to get permission to notify.');
}
});
}
firebase-messaging-sw.js:
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.16.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.16.0/firebase-messaging-compat.js');
/*
Initialize the Firebase app in the service worker by passing in the messagingSenderId.
*/
firebase.initializeApp({
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "G-JK625X6GX2"
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
console.log(payload.notification.title);
});
messaging.onBackgroundMessage((payload) => {
console.log('[firebase-messaging-sw.js] Received background message ');
console.log(payload.notification.title);
});
When I execude the code I see the output of console.log("TOKEN: " + currentToken);
So token is generated. When I try to send notification to this token I am monitoring the browser console but no notification seems to be received. Any idea why ?
P.S.
I am trying this locally on my Mac using Valet as service for the domain.

Why am I unable to sign in anonymously as an authenticated user in firebase?

I am trying to login as an authenticated user anonymously. Here is my code:
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
const firebaseConfig = {
apiKey: "key_here",
authDomain: "project.firebaseapp.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "id_here",
databaseURL: "https://project-default-rtdb.firebaseio.com",
appId: "app_id_here"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
document.getElementById("login").addEventListener("click",function(event){
event.preventDefault();
onAuthStateChanged(auth, (user) => {
if(user){
//user can successfully login
}
else{
console.log("Something went wrong");
}
}, (error) => console.error(error)) //Nothing prints here
}
I was able to successfully log in 'til yesterday. But since this morning I keep getting the error Something went wrong in my console.
I didn't change anything in the code, nor in my firebase credentials. Where am I going wrong?

It was so silly of me to not read the documentation page carefully, I had forgotten to execute the signInAnonymously() method before checking for the user's data, the complete code is as follows:
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js';
import { getAuth, onAuthStateChanged, signInAnonymously } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
const firebaseConfig = {
apiKey: "key_here",
authDomain: "project.firebaseapp.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "id_here",
databaseURL: "https://project-default-rtdb.firebaseio.com",
appId: "app_id_here"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
document.getElementById("login").addEventListener("click",function(event){
event.preventDefault();
signInAnonymously(auth)
.then(() => {
onAuthStateChanged(auth, (user) => {
if(user){
//user can successfully login
}
else{
console.log("Something went wrong");
}
});
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode+": "+errorMessage);
});
});

FCM browser notification not working in Vue 3

Here's my code. So far I've managed to get the background notification working. (Onmessage not working)
"firebase": "^9.6.7",
firebase-messaging-sw.js
null
App.vue
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from "firebase/messaging";
const firebaseConfig = {
apiKey: "AIzaSyDXnUaeAK",
authDomain: "test-test.firebaseapp.com",
projectId: "test-test",
storageBucket: "test-test.appspot.com",
messagingSenderId: "123456789",
appId: "1:38296:web:j88054626",
measurementId: "X-TEST"
};
initializeApp(firebaseConfig);
const messaging = getMessaging();
getToken(messaging, { vapidKey: 'key' })
.then((currentToken) => {
console.log("currentToken", currentToken);
})
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
// ...
});

Firebase Web Push Notification unable to receive onMessage notifications

Hi I have Web based fcm setup using django and plain html
I Have refer this https://firebase.google.com/docs/cloud-messaging/js/receive#handle_messages_when_your_web_app_is_in_the_foreground
HTML
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const messaging = getMessaging();
// THIS IS NOT WORKING
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
console.log('Message received. ', payload);
console.log('Message received. ', payload);
});
getToken(messaging, { vapidKey: '' }).then((currentToken) => {
if (currentToken) {
console.log('11111111')
console.log(currentToken)
console.log(currentToken)
} else {
console.log('222222222')
// 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);
// ...
});