the notification push up of my website does not display when my website is not focused

Viewed 23

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

enter image description here

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.

0 Answers
Related