FCM push notification with angular service worker not does not receive

Question

I'm trying to implement fcm cloud-messaging in my angular project, I managed to register the token and ask for notification permission. But I am not receiving the messages.

firebase-messaging-sw

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

firebase.initializeApp({
 apiKey: "XXXXXXXXXX",
 authDomain: "XXXXXXXXXX.firebaseapp.com",
 databaseURL: "https://XXXXXXXXXX.firebaseio.com",
 projectId: "XXXXXXXXXX",
 storageBucket: "XXXXXXXXXX.appspot.com",
 messagingSenderId: "XXXXXXXXXX",
 appId: "XXXXXXXXXX",
  measurementId: "G-XXXXXXXXXX"
});
const messaging = firebase.messaging();
console.log("service worker", messaging);

ANGULAR.JSON

"assets": [ "src/favicon.ico", "src/assets", "src/firebase-messaging-sw.js", "src/manifest.json" ],

app.module

initializeApp(environment.firebase);

component

  requestPermission() {
    const messaging = getMessaging();
    getToken(messaging, 
     { vapidKey: environment.firebase.vapidKey}).then(
       (currentToken) => {
         if (currentToken) {
           console.log("token");
           console.log(currentToken);
         } else {
           console.log('No registration token available. Request permission to generate one.');
         }
     }).catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
    });
  }
  listen() {
    console.log("listen start");
    const messaging = getMessaging();
    onMessage(messaging, (payload) => {
      console.log('Message received. ', payload);
    });
    
  }

CALL INSOMNIA ( https://fcm.googleapis.com/fcm/send )

{

    "notification" : {
        "title" : "test",
        "body": "test"
    },
    "to":"xxxxxx"
}

Answer 1

Could you confirm that your FCM service worker is registered in your browser? (for ex: If you run in localhost:4200, start inspect -> Application -> Service Worker)

If it is registered, then check with your FCM configuration.

else try to use namespaced imports in your firebase-messaging.js

Please let me know it resolves your issue! Thanks!!