Configura una app cliente de Firebase Cloud Messaging en JavaScript

La API de JavaScript de FCM te permite recibir mensajes de notificación en las apps web que se ejecutan en navegadores que admiten service worker. Los siguientes navegadores están incluidos, entre otros:

  • Chrome: 50 y versiones posteriores
  • Firefox: 44 y versiones posteriores
  • Opera Mobile: 37 y versiones posteriores

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 en el panel Configuración de Firebase console y desplázate hasta la sección Configuración web.
  2. En la pestaña Certificados push para 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 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 en el panel Configuración de Firebase console y desplázate hasta la sección Configuración web.
  2. En la pestaña Certificados push para 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 app web que especifique el gcm_sender_id, un valor incrustado en el código que indica que FCM está autorizado para enviar mensajes a esta app. 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.

  // 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):

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.