Cómo recibir mensajes en un cliente de JavaScript

El comportamiento de los mensajes varía si la página se encuentra en primer plano (tiene el “foco”) o en segundo plano, escondida detrás de otras pestañas, o completamente cerrada. En todos los casos, la página debe administrar la devolución de llamada de onMessage, pero en los casos en segundo plano, también deberás configurar la notificación en pantalla para permitir que el usuario lleve tu aplicación web al primer plano.

La muestra de inicio rápido de JavaScript demuestra todo el código necesario para recibir mensajes.

Maneja mensajes cuando la aplicación web está en primer plano

Para recibir el evento onMessage, tu app debe definir el service worker de mensajería de Firebase en firebase-messaging-sw.js. Otra opción es especificar un service worker existente con useServiceWorker.

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Cuando la app se encuentra en primer plano (el usuario está viendo tu página web actualmente), puedes recibir datos y cargas de notificaciones directamente en la página.

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a sevice worker
//   `messaging.setBackgroundMessageHandler` handler.
messaging.onMessage(function(payload) {
  console.log("Message received. ", payload);
  // ...
});

Maneja mensajes cuando la aplicación web está en segundo plano

Todos los mensajes que se reciben mientras la app está en segundo plano desencadenan una notificación en pantalla en el navegador. Puedes especificar opciones para esta notificación, como un título o una acción cuando se hace clic, ya sea en la solicitud de envío de tu servidor de apps o mediante el uso de la lógica del service worker en el cliente.

Cómo configurar opciones de notificación en la solicitud de envío

En el caso de los mensajes de notificación que se envían desde el servidor de apps, la API de JavaScript de FCM es compatible con la clave click_action. Por lo general, esta se dirige a una página de tu aplicación web, de manera que, cuando un usuario hace clic en la notificación, tu app pasa a primer plano.

https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=AIzaSyC...akjgSX0e4

{ "notification": {
    "title": "Background Message Title",
    "body": "Background message body",
    "click_action" : "https://dummypage.com"
  },

  "to" : "eEz-Q2sG8nQ:APA91bHJQRT0JJ..."

}

Debido a que los mensajes de datos no son compatibles con click_action, se recomienda que agregues una carga de notificación a todos los mensajes de datos. También puedes administrar notificaciones con el service worker.

Para ver una explicación de la diferencia entre los mensajes de notificación y los de datos, consulta los tipos de mensaje.

Configuración de las opciones de notificación en el service worker

Tanto para los mensajes de notificación como para los de datos, puedes configurar las opciones de notificación en el service worker. Primero, inicia tu app en el service worker:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Para establecer opciones, llama a setBackgroundMessageHandler en firebase-messaging-sw.js. En este ejemplo, se configuran las opciones de título, cuerpo, ícono y acción de clic.

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

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

Prácticas recomendadas para las notificaciones

Si estás familiarizado con el envío de mensajes a la Web, es posible que ya conozcas los lineamientos sobre las características de una buena notificación. Para los programadores que envían notificaciones a través de FCM para la Web, las consideraciones más importantes son la precisión y la relevancia. A continuación, te mostramos algunas recomendaciones específicas para que tus notificaciones sean precisas y relevantes:

  • Usa el campo de ícono para enviar una imagen significativa. En muchos casos de uso, esta debería ser el logotipo de una empresa o app que los usuarios reconozcan fácilmente. En el caso de una aplicación de chat, podría ser la imagen de perfil del usuario remitente.
  • Usa el campo de título para expresar la naturaleza precisa del mensaje. Por ejemplo, "Jimmy respondió" transmite información más precisa que "Mensaje nuevo". No uses este espacio valioso para el nombre de tu empresa o tu app; para ello, usa el ícono.
  • No uses el título ni el cuerpo de la notificación para mostrar el nombre de tu sitio web o tu dominio; las notificaciones ya contienen el nombre de tu dominio.
  • Agrega una click_action, para dirigir al usuario de vuelta a tu aplicación web y ubicarla en el enfoque del navegador. En casos poco comunes en los que toda la información que debes transmitir cabe en la notificación, es posible que no necesites una acción de clic.

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.