es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo manejar las notificaciones push de Firebase cuando el sitio ya está abierto?

13 Jul, 2023 Programación

Tengo una PWA que envía una notificación a las personas cuando las llaman. Solo funciona cuando la PWA no está abierta o cuando el sitio no está en foco.
¿Cómo puedo seguir recibiendo la notificación en la aplicacion/sitio incluso si ya está en foco? Quiero que la PWA se dé cuenta de que recibió una notificación push, incluso si ya está abierta, tal vez manejar las cosas de manera diferente en ese caso.

Tengo este código para enviar la notificación:

function sendNotification(){
    const toSend ={
        notification:
        {
            title:"¡Llamada de video!",
            body:"¡Llamada de video!",
            click_action: "https://....netlify.app/?x="+m,
            sound: "default",
            vibrate: [200, 100, 200, 100, 200, 100, 200]
        },
        to:othermailandtoken[1] 
        };

        const jsonString = JSON.stringify(toSend);


      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'https://fcm.googleapis.com/fcm/send', true);
        xhr.onload = function(){
        console.log("respuesta de Google: ",this.responseText);
        }

      xhr.setRequestHeader("Content-type", "application/json");
      xhr.setRequestHeader("Authorization","key=....");
    xhr.send(jsonString);
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para recibir la notificación incluso si la PWA ya está abierta, necesitamos usar Firebase Cloud Messaging (FCM), que proporciona la capacidad de manejar notificaciones incluso cuando la aplicación o página web está en foco. Estos son los pasos que debes seguir:

    1. Agrega Firebase a tu proyecto de PWA y habilita Firebase Cloud Messaging.

    2. Registra un nuevo service worker y maneja la notificación push en el evento ‘onMessage’.

    3. Modifica tu código para usar la API de FCM para enviar la notificación push, de esta manera:

    function sendNotification() {
    const toSend = {
        notification: {
            title: "¡Llamada de video!",
            body: "¡Llamada de video!",
            click_action: "https://....netlify.app/?x=" + m,
            sound: "default",
            vibrate: [200, 100, 200, 100, 200, 100, 200]
        },
        to: othermailandtoken[1]
    };

    const jsonString = JSON.stringify(toSend);

    fetch('https://fcm.googleapis.com/fcm/send', {
        method: 'POST',
        headers: {
            'Authorization': 'key=....',
            'Content-Type': 'application/json'
        },
        body: jsonString
    })
    .then(response => {
        console.log("Respuesta de FCM: ", response);
    })
    .catch(error => {
        console.error("Error de FCM: ", error);
    });
}

    De esta manera, cuando se recibe una notificación push, se pasará al evento ‘onMessage’, que podrá manejarlo adecuadamente según si la aplicación/página web está en foco o no.

Comments are closed.