Probando notificaciones push con Firebase

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: if true;
    }
  }
}

• 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.