Construyendo un centro de notificaciones en una PWA de Firebase

Gestionar un equipo de ventas requiere muchas herramientas. Mi panel de control utilizaba notificaciones push de FCM, chats, recordatorios y un calendario compartido.

El problema era que estas herramientas vivían en islas separadas. Un operador tenía que saltar entre secciones para revisar una solicitud de permiso o un mensaje. No había un único lugar para verlo todo.

Construí un centro de notificaciones. Es una línea de tiempo única para cada evento relevante.

Cómo utilicé Firebase

Utilizo tanto Firestore como Realtime Database (RTDB). Cada uno cumple un propósito específico.

• Firestore para el historial: Usa .get() para datos que no cambian, como las solicitudes de permiso. Esto mantiene los costes bajos porque no necesitas un listener permanente. • RTDB para datos en tiempo real: Usa .on('value') para chats, recordatorios y eventos de calendario. Estos nodos son pequeños y necesitan reaccionar instantáneamente.

Elegir la incorrecta se refleja inmediatamente en tu factura de Firebase.

Los obstáculos técnicos

Construir la interfaz de usuario requirió resolver tres problemas principales:

  1. Usabilidad móvil Utilicé flex-wrap: wrap para los chips de filtrado. Mi primera versión utilizaba desplazamiento horizontal. En dispositivos móviles, los usuarios no veían los chips y no sabían que podían desplazarse. Envolverlos en dos filas solucionó esto.

  2. Posicionamiento CSS Añadí el panel directamente a document.body. Si anidas un elemento fixed dentro de un contenedor con overflow:hidden, el posicionamiento se rompe.

  3. El error de restauración de sesión En producción, los usuarios que utilizaban "recordarme" veían un panel vacío. El código de inicialización solo se ejecutaba durante el inicio de sesión manual. No se ejecutaba cuando se restauraba la sesión.

Implementé tres niveles de respaldo para asegurar que el centro siempre cargue:

  • Un wrapper en la función de inicio de sesión.
  • Un bucle de sondeo (polling) que comprueba al usuario cada 500 ms.
  • Un MutationObserver que vigila que el perfil de usuario aparezca en la pantalla.

Ejemplos de diseño exitoso

  • Usa localStorage para rastrear el estado de lectura por usuario.
  • Usa índices compuestos en Firestore para consultas complejas.
  • Usa media queries para mover elementos fijos en dispositivos móviles para que no bloqueen la barra superior.

La arquitectura importa. Usa Firestore para registros (logs) y RTDB para actualizaciones en tiempo real.

Fuente: https://dev.to/androve2k/building-a-notification-center-in-a-firebase-pwa-firestore-vs-rtdb-and-three-bootstrap-fallback-5feb