Cómo configurar 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 el navegador para recibir mensajes

Deberás agregar un manifiesto de app web que especifique 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):

{
  "//": "Some browsers will use this to enable push notifications.",
  "//": "It is the same for all projects, this is not your project's sender ID",
  "gcm_sender_id": "103953800507"
}

Recupera un objeto de mensajería

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

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…

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