Ir a la consola

Configura una app cliente de Firebase Cloud Messaging en JavaScript

La API de JavaScript de FCM te permite recibir mensajes de notificación en aplicaciones web que se ejecutan en navegadores compatibles con la API de Push. Esto incluye las versiones de navegadores que aparecen en esta matriz de compatibilidad.

Envía mensajes a clientes JavaScript mediante los protocolos del servidor de apps HTTP y XMPP, como se describe en Envía mensajes. No se pueden enviar mensajes desde Firebase console.

Para comenzar con la API de JavaScript de FCM, debes agregar Firebase a tu app web y agregar la lógica necesaria para acceder a los tokens de registro.

Agrega Firebase al proyecto de JavaScript

Si no lo hiciste antes, agrega Firebase al proyecto de JavaScript.

Configura las credenciales web con FCM

La interfaz Web de FCM usa Credenciales web llamadas "Identificación voluntaria del servidor de aplicaciones", o claves "VAPID", para autorizar el envío de solicitudes a servicios push compatibles con web. Para suscribir tu aplicación a las notificaciones push, debes asociar un par de claves a tu proyecto de Firebase. Puedes generar un nuevo par de claves o importar tu par de claves existente a través de Firebase Console.

Genera un par de claves nuevo

  1. Abre la pestaña Cloud Messaging del panel Configuración de Firebase console y desplázate hasta la sección Configuración web.
  2. En la pestaña Certificados push web, haz clic en Generar par de claves. La consola muestra un aviso de que se generó el nuevo par y muestra la string de la clave pública y la fecha de creación.

Importa un par de claves existente

Si tienes un par de claves existente que ya estás utilizando con tu aplicación web, puedes importarlo a FCM para llegar a las instancias de tu aplicación web existente a través de las API de FCM. Para importar claves, debes tener acceso de nivel propietario al proyecto de Firebase. Importa tus claves públicas y privadas existentes en forma de una URL base64 con codificación segura:

  1. Abre la pestaña Cloud Messaging del panel Configuración de Firebase console y desplázate hasta la sección Configuración web.
  2. En la pestaña Certificados push web, encuentra y selecciona el texto del vínculo "como importar un par de claves existente".
  3. En el cuadro de diálogo Cómo importar un par de claves, ingresa tus claves públicas y privadas en los campos correspondientes y haz clic en Importar. La consola muestra la string de la clave pública y la fecha de creación.

Para obtener instrucciones sobre cómo agregar la clave a tu app, consulta Configura credenciales web en tu app. Para obtener más información sobre el formato de las claves y cómo generarlas, consulta Claves para servidor de aplicaciones.

Configura el navegador para recibir mensajes

Deberás agregar un manifiesto de aplicación web que especifique el gcm_sender_id, un valor hard-coded para indicar que FCM está autorizado a enviar mensajes a esta aplicación. Si la app ya tiene un archivo de configuración manifest.json, asegúrate de agregar el ID de remitente del navegador exactamente como se muestra (no cambies el valor):

{
  "gcm_sender_id": "103953800507"
}

Recupera un objeto de mensajería

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

Configura credenciales web en tu app

El método usePublicVapidKey le permite a FCM usar la credencial de la clave VAPID cuando envía solicitudes de mensajes a distintos servicios push. Con la clave que generaste o importaste según las instrucciones en Configura credenciales web en FCM, agrégala a tu código una vez recuperado el objeto de mensajería:

// Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");

Solicita permiso para recibir notificaciones

El método messaging.requestPermission() muestra un diálogo de consentimiento para informarle al usuario que debe otorgarle permiso a la app para recibir notificaciones en el navegador. Si se niega el permiso, las solicitudes de token de registro de FCM generarán un error.

messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');
  // TODO(developer): Retrieve an Instance ID token for use with FCM.
  // ...
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

Accede al token de registro

En esta sección, se describe cómo recuperar el token de registro de una instancia de app y cómo supervisar los eventos de actualización de tokens. Dado que el token podría rotarse después del inicio, es importante que controles la actualización de tokens y siempre recuperes el token de registro más reciente.

El token de registro puede cambiar en las siguientes situaciones:

  • La aplicación web borra el token de registro.
  • El usuario borra los datos del navegador. En este caso, debes llamar a getToken para recuperar el nuevo token.

Recupera el token de registro actual

Cuando necesites recuperar el token actual, llama a getToken. Este método muestra un resultado nulo cuando no se cuenta con el permiso necesario. De lo contrario, muestra un token o rechaza la promesa debido a un error.

El servicio de mensajería requiere un archivo firebase-messaging-sw.js. A menos que ya tengas un archivo firebase-messaging-sw.js, crea un archivo vacío con ese nombre y guárdalo en la raíz de tu dominio antes de recuperar un token. Puedes agregar contenido significativo al archivo en etapas posteriores del proceso de configuración del cliente.

Para recuperar el token actual, sigue este ejemplo:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then(function(currentToken) {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch(function(err) {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

Supervisa la actualización de tokens

La devolución de llamada onTokenRefresh se activa cada vez que se genera un nuevo token, por lo que invocar getToken en este contexto garantiza que se accede a un token de registro vigente y disponible.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(function() {
  messaging.getToken().then(function(refreshedToken) {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch(function(err) {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

Una vez que obtienes el token, envíalo al servidor de apps y almacénalo con el método que prefieras. Puedes usar la API de servidor Instance ID para obtener información sobre las suscripciones

Pasos siguientes

Una vez que hayas completado los pasos de configuración, aquí se mencionan algunas opciones para seguir adelante con FCM para Web (JavaScript):