Firebase cloud messaging with Angular 12 and Firebase v9

I am using angular 12 and firebase v9. I have been trying to implement FCM with Angular and django. I have facing an issue maybe you have too. We can use this post to discuss and come to a solution.

Before you tell me that there are many posts about it, let me tell you I have tried everything that is on the internet. Tutorials are old, methods are depreciated. So we have to start new.

For the start, I have created a service worker called firebase-messaging-sw.js. here is the code.

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


const firebaseApp = initializeApp({
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***"
});
const messaging = getMessaging(firebaseApp);

Then manifest.json

{
"gcm_sender_id": "***"  
}

Added both of them in angular.json under assets and manifest.json in index.html, I put the code like:

<link rel="manifest" href="manifest.json">

Then i call the gettoken script in component code is

const messaging = getMessaging();
getToken(messaging, { vapidKey: '***' 
}).then((currentToken) => {
              if (currentToken) {
                
                console.log('hey')
              } else {
                
                console.log('No registration token available. Request permission to 
generate one.');
               
              }
            }).catch((err) => {
              console.log('An error occurred while retrieving token. ', err);
             
            });

Now after serving the app from HTTP or either ng serve -ssl

we are getting the above error. Let's discuss this.

Update: I have added angular/pwa which created it's own service worker and manifest file. Should I add my firebase code it that??

Also on building the angular/pwa app, getting the error service worker generation failed.

let's take time and solve this issue together.