FCM - web Token getting generated in my account but if i am login with some other Gmail account in chrome then it will throws Error

Question

Other than my registered Gmail account I will be getting the below error in the chrome browser perhaps token getting generated if I log in with my email id in crime.

An error occurred while retrieving the token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:3000/firebase-cloud-messaging-push-scope') with script ('http://localhost:3000/firebase-messaging-sw.js'): ServiceWorker script evaluation failed (messaging/failed-service-worker-registration).

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-messaging.js')


const vapidKey = 'VDID_Mine'; //from firebase project settings
const firebaseConfig = { //from firebase project settings
    `...config info`
};

if (!firebase.apps.length) {
    try {
        firebase.initializeApp(firebaseConfig);
    } catch (e) {
        console.log("sw error", e)
    }
}

let messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    var notificationTitle = 'Background Message Title';
    var notificationOptions = {
        body: 'Background Message body.',
        icon: '/firebase-logo.png'
    };

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

webpush.js

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
import localforage from 'localforage'

const firebaseCloudMessaging = {
    tokenInlocalforage: async () => {
        return localforage.getItem('fcm_token')
    },

    init: async function () {

        const firebaseConfig = {
            ...config
        };
        const app = initializeApp(firebaseConfig);

        const messaging = getMessaging(app);

        getToken(messaging, { vapidKey: 'vpid_mine' }).then((currentToken) => {
            if (currentToken) {
                alert("cur+" + currentToken)

                localforage.setItem('fcm_currentToken', currentToken)
                console.log('fcm_currentToken', 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);
            // ...
        });
    },
}

export { firebaseCloudMessaging }

Answer 1

use compat scripts in your importScripts

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

firebase.initializeApp({
    `...config info`
});

firebase.messaging();