Envía un mensaje de prueba 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 a 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 Notification.requestPermission() de la API de notificaciones web permite mostrar un cuadro de diálogo de consentimiento a fin de que los usuarios otorguen permiso a tu app para recibir notificaciones en el navegador. Si se niega el permiso, las solicitudes de token de registro de FCM generarán un error.

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // TODO(developer): Retrieve an Instance ID token for use with FCM.
    // ...
  } else {
    console.log('Unable to get permission to notify.');
  }
});

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 supervises 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 token nuevo.

Recupera el token de registro actual

Para 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((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((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 de onTokenRefresh se activa cada vez que se genera un nuevo token, por lo que invocar a 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(() => {
  messaging.getToken().then((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((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

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

Envía un mensaje de notificación de prueba

  1. Instala y ejecuta la app en el dispositivo de destino.

  2. Asegúrate de que la app se encuentre en segundo plano en el dispositivo.

  3. Abre el Compositor de Notifications y selecciona Notificación nueva.

  4. Ingresa el texto del mensaje.

  5. Selecciona Enviar mensaje de prueba.

  6. En el campo Agregar un token de registro de FCM, ingresa el token de registro que obtuviste en una sección anterior de esta guía.

  7. Haz clic en Probar.

Después de hacer clic en Probar, los dispositivos cliente de destino que tienen la app en segundo plano recibirán la notificación en el navegador.

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 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, por el momento, 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 Compila 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 envíes mensajes de notificación de manera correcta mientras la app está en segundo plano, consulta Recibe mensajes en un cliente de JavaScript para comenzar a enviar mensajes a apps en primer plano.

Más allá de las notificaciones

Para dejar atrás las notificaciones y agregar otros comportamientos más avanzados a la app, consulta lo siguiente: