Envía tu primer mensaje a una app en segundo plano

Para comenzar a usar FCM, crea el caso práctico más sencillo: enviar un mensaje de notificación al dispositivo de un usuario específico cuando la app se encuentra en segundo plano en el dispositivo. En esta página se indican todos los pasos necesarios para lograrlo, desde la configuración hasta la verificación. Es posible que ya hayas realizado algunos de los pasos si configuraste una app cliente de JavaScript para FCM.

Configura el SDK

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

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.

Envía un mensaje de notificación

En el cuerpo de la solicitud, asigna a la clave token del objeto message el token de registro para la instancia de app específica a la que deseas orientar. Consulta la información de configuración del cliente para tu plataforma si deseas obtener más información sobre los tokens de registro.

Todas las solicitudes HTTP a la API v1 se deben autorizar con un token de acceso. Consulta Autorizar solicitudes de envío para obtener más información sobre cómo obtener un token de acceso desde tus credenciales de cuenta de servicio.

Solicitud HTTP POST

POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1

Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA

{
  "message":{
    "token" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "notification" : {
      "body" : "This is an FCM notification message!",
      "title" : "FCM Message",
      }
   }
}

cURL

curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA" -H "Content-Type: application/json" -d '{
"message":{
  "notification": {
    "title": "FCM Message",
    "body": "This is an FCM Message",
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send

Respuesta HTTP

{
    "name": "projects/myproject-b5ae1/messages/0:1500415314455276%31bd1c9631bd1c96"
}

Agrega propiedades push web a una carga útil de notificaciones

Con la API de HTTP v1, puedes especificar opciones de notificación adicionales como un objeto JSON que contenga todas las propiedades válidas de la API de notificaciones web. Los campos title y body de este objeto, si los hay, anulan los campos google.firebase.fcm.v1.Notification.title y google.firebase.fcm.v1.Notification.body equivalentes.

Solicitud HTTP POST

POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1

Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm

{
  "message": {
    "token" : <token of destination app>,
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  }
}

Con esta solicitud, los clientes web objetivo (incluidos los navegadores compatibles que se ejecutan en Android) reciben un mensaje de notificación de prioridad alta que permanece activo hasta que el usuario interactúa con él. El mensaje contiene los siguientes campos:

  • Título: Mensaje de FCM
  • Cuerpo: Este es un mensaje enviado de FCM a web
  • RequireInteraction: true
  • Insignia: /badge-icon.png

Las apps nativas de iOS y Android (a las que no se aplican las anulaciones web) reciben un mensaje de notificación de prioridad normal con los siguientes elementos:

  • Título: Mensaje de FCM
  • Cuerpo: Este es un mensaje enviado de FCM

Ten en cuenta que, en la actualidad, RequireInteraction solo es compatible parcialmente con los navegadores. Los desarrolladores deben consultar la especificación de la API de notificaciones web para verificar la compatibilidad de la plataforma y el navegador.

cURL

curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm" -H "Content-Type: application/json" -d '{
  "message": {
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' "https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send"

Respuesta HTTP

{
    "name": "projects/myproject-b5ae1/messages/0:1500415314455276%31bd1c9631bd1c98"
}

Consulta Compilar solicitudes de envío del servidor de apps para obtener más información sobre los mensajes de FCM.

Próximos pasos

Envía mensajes a apps en primer plano

Una vez que hayas enviado mensajes de notificación de manera correcta mientras la app está en segundo plano, consulta cómo recibir mensajes en un cliente de JavaScript para comenzar a enviar mensajes a apps en primer plano.

Más allá de las notificaciones

Para ir más allá de las notificaciones y agregar otros comportamientos más avanzados a tu app, consulta lo siguiente: