Domina las notificaciones push en la web con Firebase paso a paso: desde solicitar permisos y registrar el service worker, hasta generar el token, guardarlo en Firestore, desplegar en Hosting y usar Functions para suscribir a un topic y enviar mensajes en foreground y background. Aquí verás qué tocar, cómo validarlo y cómo depurar errores típicos.
¿Cómo configurar y probar notificaciones en Firebase paso a paso?
Antes de enviar mensajes, la clave es confirmar que el navegador entrega permisos, el service worker se registra y el token se genera y persiste.
¿Cómo obtener y mostrar el token del navegador?
Imprime el token para inspeccionarlo en consola.
console.log(token);
Flujo esencial: dar permiso de notificaciones, registrar el service worker, generar el token y guardarlo en la colección tokens de Firestore.
Si aparece “permisos insuficientes” al insertar, ajusta reglas (ver más abajo).
¿Cómo verificar el service worker y el manifest?
Revisa en la pestaña Application del navegador que el service worker esté “registrado y activo”.
Confirma que el manifest.json se cargó correctamente. Si no aparece, hay un problema de carga.
¿Cómo desplegar en hosting con Firebase CLI?
Usa el hosting para pruebas reales.
firebase deploy
Abre la URL del proyecto y concede permisos. Verás en consola: permiso otorgado, service worker registrado y el token generado.
¿Qué reglas y funciones necesitas para registrar tokens y enviar mensajes?
El guardado del token en Firestore y el envío de notificaciones dependen de reglas y cloud functions bien configuradas.
¿Cómo permitir escritura en la colección tokens en Firestore?
Crea una regla que permita leer y escribir en tokens aun sin autenticación (para pruebas).
rules_version ='2';service cloud.firestore{ match /databases/{database}/documents { match /tokens/{doc}{ allow read,write:iftrue;}}}
Guarda, actualiza el sitio y verifica que ya no aparezcan errores al insertar tokens.
¿Cómo desplegar y qué hace cada función en Functions?
Selecciona el proyecto y despliega solo las funciones.
firebase use --add
firebase deploy --only functions
Función 1: al crear un documento en tokens, suscribe ese token al topic “nuevo post”.
Función 2: al crear un post, toma título y descripción y envía un mensaje al topic para que llegue a todos los tokens suscritos.
Verifica en la consola de Firebase, sección Functions y “Registros” que ambas se disparen correctamente.
¿Cómo probar las notificaciones en foreground y background?
Foreground: crea un post y observa la notificación en pantalla mientras el sitio está abierto.
Background: minimiza el sitio y simula el envío con un API (ejemplo con Postman):
URL usada: fcm.googleapis.com/scm/sent.
Cabecera necesaria: Authorization: key=<CLAVE_DEL_SERVIDOR> (desde Configuración del proyecto → Mensajería en la nube).
Cuerpo de ejemplo para enviar a un token o a un topic:
{"to":"<TOKEN_O_/topics/nuevo-post>","data":{"title":"Nuevo post","description":"Descripción del contenido","url":"https://tu-sitio"}}
En el service worker, asegúrate de mostrar la notificación correctamente:
self.registration.showNotification('Nuevo post',{body:'Tenemos un nuevo post, revísalo.',});
Al hacer clic en la notificación, se abre la URL definida en el código.
¿Cómo depurar errores comunes al probar notificaciones?
Estos fallos aparecieron durante la prueba y así se resolvieron sin bloquear el avance.
“Error al registrar el service worker” o mensajes inconsistentes.
Verifica registro en Application y el manifest.json cargado.
“Permisos insuficientes” al guardar el token.
Ajusta reglas para la colección tokens y vuelve a probar.
No aparecen cambios por caché del navegador.
Usa Control + F5 para limpiar caché y recargar.
Los cambios no se reflejan en producción.
Recuerda que estás en hosting: vuelve a ejecutar firebase deploy.
La notificación en background no llega.
Revisa el Authorization con la clave del servidor y que el token sea el vigente.
Corrige el método showNotification en el service worker si el nombre estaba mal escrito.
¿Te animas al siguiente paso? Implementa el reto: al crear un comentario, envía una notificación a administradores. Crea un topic de administradores y regístralos para que reciban el mensaje. Cuéntame en comentarios cómo lo resolviste y qué mejoras agregarías.
