[question] modular api cannot show notification

[bangluong]

Operating System

N/A

Environment (if applicable)

N/A

Firebase SDK Version

react firebase 10.14.0

Firebase SDK Product(s)

Messaging

Project Tooling

ReactJS with webpack

Detailed Problem Description

cannot show notification

Steps and code to reproduce issue

when message sent, I got payload in my console but not have notification popup
I log registration, it not have showNotification: https://imgur.com/5ECwl43
here is my sw.js

import { initializeApp } from "firebase/app";
import { getMessaging, onBackgroundMessage } from "firebase/messaging/sw";

export default function() {
    const firebaseApp = initializeApp({
        apiKey: process.env.FIREBASE_API_KEY,
        authDomain: process.env.FIREBASE_AUTH_DOMAIN,
        projectId: process.env.FIREBASE_PROJECT_ID,
        storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_SENDER_ID,
        appId: process.env.FIREBASE_APP_ID,
        measurementId: process.env.FIREBASE_MERCHANT_ID
    });
    const messaging = getMessaging(firebaseApp);
    onBackgroundMessage(messaging, (payload) => {
        console.log('Message received. ', payload);
        const notificationTitle = 'Background Message Title';
        const notificationOptions = {
            body: 'Background Message body.',
            icon: '/firebase-logo.png'
        };
        self.registration.showNotification(notificationTitle, notificationOptions);
    });

}

---

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

So, FYI, console.logging registration is somewhat misleading because classes often don't show their methods when you console.log. I get the same result on a working app. That doesn't mean showNotifcation is missing. If you log console.log('sn', self.registration.showNotification); you should get sn ƒ showNotification() { [native code] }.

So that's not related to the problem. If you're not seeing an error in the dev console, the call is being made without error. The problem is that you're not seeing a popup. The first thing I would look at is if you've successfully set permissions?

https://firebase.google.com/docs/cloud-messaging/js/client#access_the_registration_token

Are you getting permission === 'granted'?

I also notice you didn't specify your OS or the browser you're using, which could be important.

[bangluong]

yes, I add requestPermission:
const permission = await Notification.requestPermission();
if (permission === "granted") {
const token = await getMessagingToken();
if (token !== firebaseToken) {
setFirebaseToken(token);
await pushToken({
variables: {
token
}
});
}
}
I check my db, it saved new token.
This error occurs with modular. when I change to use namespace, it work
this is my register sw:
window.navigator.serviceWorker.register('/firebase-messaging-sw.js', {type: "module"})
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(err => {
console.error('Service Worker registration failed:', err);
});

[DellaBitta]

Hi @bangluong,

Do you see any output from this following line when usuing modular?

console.log('Message received. ', payload);

If so then we know that at least data is getting down the browser.

If not, then I wonder if the service worker is even building properly. Next step would be to confirm that you've configured webpack to bundle up your service worker with all of its dependencies.

It might be worth building your modular application (and not the namespace version), hosting it and loading it in a browser. Then remove the Service Worker from the browser (Inspect->Application->Service workers->Unregister) and reload your page. Then check to see if your service worker is there in the Applicaiton Inspector. Also click on the link the servcie worker source to check to see if the source is large (if it includes all of its dependencies) or if it's just the baseline source of your raw service worker.