FCM web push notification duplicate notifications

I added web push notification to my web site using firebase it worked successfully, but the problem is the function that call firebase located in the main js file so when the user opened many tabs from the web site will receive notifications equal to the numbers of opening tabs. Any help or resource to fix the issue ? here is the code in the main js

var config = {
    apiKey: "xxxxxxxxxxx",
    authDomain: "xxxxxxxxx",
    databaseURL: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxxx",
    appId: "xxxxxx",
    projectId: "xxxxxxx"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
 }
 
const messaging = firebase.messaging();
messaging.requestPermission()
    .then(function(){
        console.log("GRANTED");
        console.log(messaging.getToken());
        return messaging.getToken();
    })
    .then(function(token){
        console.log("user token is "+ token);
       
    })
    .catch(function(err){
        console.log('Error Occurred.' + err)
    });

messaging.onMessage(function(payload){

title = payload.notification.title;
options={
    body:payload.notification.body,
    icon:payload.notification.icon,
    click_action:payload.notification.click_action,
      data: {
      click_action:payload.notification.click_action
          }
    
    };
        var notification = new Notification(title,options);
});