Entérate de todos los anuncios de Firebase Summit y descubre cómo Firebase puede ayudarte a acelerar el desarrollo de las apps y a ejecutarlas con confianza. Más información

Recibir mensajes en un cliente JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

El comportamiento de los mensajes difiere dependiendo de si la página está en primer plano (tiene el foco) o en segundo plano, oculta detrás de otras pestañas o completamente cerrada. En todos los casos, la página debe manejar la devolución de llamada de onMessage , pero en los casos en segundo plano, es posible que también deba manejar onBackgroundMessage o configurar la notificación de visualización para permitir que el usuario traiga su aplicación web al primer plano.

estado de la aplicación Notificación Datos Ambas cosas
Primer plano onMessage onMessage onMessage
Fondo (trabajador de servicio) onBackgroundMessage (la notificación de visualización se muestra automáticamente) onBackgroundMessage onBackgroundMessage (la notificación de visualización se muestra automáticamente)

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

Maneje los mensajes cuando su aplicación web esté en primer plano

Para recibir el evento onMessage , su aplicación debe definir el trabajador del servicio de mensajería de Firebase en firebase-messaging-sw.js . Como alternativa, puede proporcionar un trabajador de servicio existente al SDK a través de getToken(): Promise<string> .

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Web version 8

// 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/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Cuando su aplicación está en primer plano (el usuario está viendo su página web), puede recibir cargas útiles de datos y notificaciones directamente en la página.

Web version 9

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

Web version 8

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

Manejar mensajes cuando su aplicación web está en segundo plano

Todos los mensajes recibidos mientras la aplicación está en segundo plano activan una notificación de visualización en el navegador. Puede especificar opciones para esta notificación, como título o acción de clic, ya sea en la solicitud de envío desde su servidor de aplicaciones o usando la lógica del trabajador del servicio en el cliente.

Configuración de las opciones de notificación en la solicitud de envío

Para los mensajes de notificación enviados desde el servidor de aplicaciones, la API de JavaScript de FCM admite la clave fcm_options.link . Por lo general, esto se establece en una página en su aplicación web:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

Si el valor del enlace apunta a una página que ya está abierta en una pestaña del navegador, un clic en la notificación trae esa pestaña al primer plano. Si la página aún no está abierta, un clic de notificación abre la página en una nueva pestaña.

Debido a que los mensajes de datos no son compatibles fcm_options.link , se recomienda agregar una carga útil de notificación a todos los mensajes de datos. Alternativamente, puede manejar las notificaciones usando el trabajador de servicio.

Para obtener una explicación de la diferencia entre los mensajes de notificación y de datos, consulte Tipos de mensajes .

Configuración de opciones de notificación en el trabajador de servicio

Para mensajes de datos, puede establecer opciones de notificación en el trabajador de servicio. Primero, inicialice su aplicación en el trabajador de servicio:

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Web version 8

// 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/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Para establecer opciones, llama a onBackgroundMessage en firebase-messaging-sw.js . En este ejemplo, creamos una notificación con campos de título, cuerpo e icono.

Web version 9

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (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'
  };

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

Web version 8

messaging.onBackgroundMessage((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'
  };

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

Mejores prácticas para notificaciones

Si está familiarizado con los mensajes de inserción para la web, es posible que ya haya leído las pautas generales sobre lo que constituye una buena notificación . Para los desarrolladores que envían notificaciones a través de FCM para Web, las consideraciones más importantes son la precisión y la relevancia. Aquí hay algunas recomendaciones específicas para mantener sus notificaciones precisas y relevantes:

  • Utilice el campo de icono para enviar una imagen significativa. Para muchos casos de uso, debería ser el logotipo de una empresa o una aplicación que los usuarios reconozcan de inmediato. O, para una aplicación de chat, podría ser la imagen de perfil del usuario que envía.
  • Utilice el campo de título para expresar la naturaleza precisa del mensaje. Por ejemplo, "Jimmy respondió" transmite información más precisa que "Nuevo mensaje". No use este valioso espacio para el nombre de su empresa o aplicación; use el ícono para ese propósito.
  • No utilice el título o el cuerpo de la notificación para mostrar el nombre o el dominio de su sitio web; las notificaciones ya contienen su nombre de dominio.
  • Agregue fcm_options.link , generalmente para vincular al usuario de nuevo a su aplicación web y enfocarlo en el navegador. En casos excepcionales en los que toda la información que necesita transmitir puede caber en la notificación, es posible que no necesite un enlace.