Para comenzar con FCM, desarrolle el caso de uso más simple: enviar un mensaje de notificación a un usuario específico cuando la aplicación está en segundo plano en el dispositivo. Esta página enumera todos los pasos para lograr esto, desde la configuración hasta la verificación; puede cubrir los pasos que ya completó si ha configurado una aplicación cliente JavaScript para FCM.
Configurar el SDK
Si aún no lo has hecho, agrega Firebase a tu proyecto de JavaScript .
Accede al token de registro
Cuando necesite recuperar el token de registro actual para una instancia de aplicación, primero solicite permisos de notificación al usuario con Notification.requestPermission()
. Cuando se llama como se muestra, devuelve un token si se concede el permiso o rechaza la promesa si se deniega:
function requestPermission() { console.log('Requesting permission...'); Notification.requestPermission().then((permission) => { if (permission === 'granted') { console.log('Notification permission granted.');
FCM requiere un archivo firebase-messaging-sw.js
. A menos que ya tenga un archivo firebase-messaging-sw.js
, cree un archivo vacío con ese nombre y colóquelo en la raíz de su dominio antes de recuperar un token. Puede agregar contenido significativo al archivo más adelante en el proceso de configuración del cliente.
Para recuperar el token actual:
Web modular API
import { getMessaging, getToken } from "firebase/messaging"; // Get registration token. Initially this makes a network call, once retrieved // subsequent calls to getToken will return from cache. const messaging = getMessaging(); getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => { if (currentToken) { // Send the token to your server and update the UI if necessary // ... } else { // Show permission request UI console.log('No registration token available. Request permission to generate one.'); // ... } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); // ... });
Web namespaced API
// Get registration token. Initially this makes a network call, once retrieved // subsequent calls to getToken will return from cache. messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => { if (currentToken) { // Send the token to your server and update the UI if necessary // ... } else { // Show permission request UI console.log('No registration token available. Request permission to generate one.'); // ... } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); // ... });
Una vez que haya obtenido el token, envíelo a su servidor de aplicaciones y guárdelo utilizando su método preferido.
Enviar un mensaje de notificación de prueba
Instale y ejecute la aplicación en el dispositivo de destino. En dispositivos Apple, deberás aceptar la solicitud de permiso para recibir notificaciones remotas.
Asegúrese de que la aplicación esté en segundo plano en el dispositivo.
En Firebase console, abre la página de Mensajería .
Si este es su primer mensaje, seleccione Crear su primera campaña .
- Seleccione Mensajes de notificación de Firebase y seleccione Crear .
De lo contrario, en la pestaña Campañas , seleccione Nueva campaña y luego Notificaciones .
Ingrese el texto del mensaje. Todos los demás campos son opcionales.
Seleccione Enviar mensaje de prueba en el panel derecho.
En el campo etiquetado Agregar un token de registro de FCM , ingrese el token de registro que obtuvo en una sección anterior de esta guía.
Seleccione Prueba .
Después de seleccionar Probar , el dispositivo cliente objetivo (con la aplicación en segundo plano) debería recibir la notificación.
Próximos pasos
Enviar mensajes a aplicaciones en primer plano
Una vez que haya enviado correctamente mensajes de notificación mientras su aplicación está en segundo plano, consulte Recibir mensajes en un cliente JavaScript para comenzar a enviar a aplicaciones en primer plano.
Vaya más allá de los mensajes de notificación
Para ir más allá de los mensajes de notificación y agregar otro comportamiento más avanzado a su aplicación, consulte: