The notification push up of my website does not display when my website is not focused. And when browser closed the notification will display:

This is my code:
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
const { REACT_APP_VAPID_KEY } = process.env;
const publicKey = REACT_APP_VAPID_KEY;
export const getToken = async (setTokenFound) => {
let currentToken = "";
try {
currentToken = await messaging.getToken({ vapidKey: publicKey });
if (currentToken) {
setTokenFound(true);
} else {
setTokenFound(false);
}
} catch (error) {
console.log("An error occurred while retrieving token. ", error);
}
return currentToken;
};
export const onMessageListener = (callback) =>
new Promise((resolve) => {
messaging.onBackgroundMessage((payload) => {
const data=(JSON.parse(payload.data.data))
const description=()=>{
if(data?.type===STRANGE_DETECTION){
return "Strange Detection"
}else if(data?.type===ENROLL_FACE_DETECTION){
return "Detected a person:"
}else if(data?.type===MOTION_DETECTION){
return "Motion Detection"
}
else if(data?.type===FIRMWARE_UPDATE){
return "Firmware Update "
}
else if(data?.type===lOCATION_SHARING){
return "Location Sharing "
}
else if(data?.type===DEVICE_SHARING){
return "Device Sharing"
}
else if(data?.type===DEVICE_REGISTER){
return "Device Register"
}
else if(data?.type===DEVICE_DISCONNECT){
return "Device Disconnection"
}
}
const notificationTitle ="INFINITY"
const notifycationOption ={
body:`${data?.content?.device_name}: ${description()} ${data?.content?.face_name}`,
icon:icon
};
self.registration.showNotification(notificationTitle,
notifycationOption);
resolve(payload);
callback(payload);
});
});
And i want to know how to display notification pop up when your web site is not focused.