Construindo um Centro de Notificações em um PWA Firebase

Gerenciar uma equipe de vendas exige muitas ferramentas. Meu painel de controle utilizava notificações push do FCM, chats, lembretes e um calendário compartilhado.

O problema era que essas ferramentas viviam em ilhas separadas. Um operador precisava alternar entre seções para verificar uma solicitação de folga ou uma mensagem. Não havia um único lugar para ver tudo.

Eu construí um centro de notificações. É uma linha do tempo única para cada evento relevante.

Como eu usei o Firebase

Eu utilizo tanto o Firestore quanto o Realtime Database (RTDB). Cada um serve a um propósito específico.

• Firestore para histórico: Use .get() para dados que não mudam, como solicitações de folga. Isso mantém os custos baixos porque você não precisa de um listener permanente. • RTDB para dados em tempo real: Use .on('value') para chat, lembretes e eventos de calendário. Esses nós são pequenos e precisam reagir instantaneamente.

Escolher o errado aparece imediatamente na sua fatura do Firebase.

Os Obstáculos Técnicos

Construir a UI exigiu a resolução de três problemas principais:

1. Usabilidade Móvel

Usei flex-wrap: wrap para os chips de filtro. Minha primeira versão usava rolagem horizontal. No celular, os usuários não conseguiam ver os chips e não sabiam que podiam rolar. Colocá-los em duas linhas resolveu isso.

2. Posicionamento CSS

Eu anexei o painel diretamente ao document.body. Se você aninhar um elemento fixed dentro de um container com overflow:hidden, o posicionamento quebra.

3. O Bug de Restauração de Sessão

Em produção, usuários que utilizavam "lembrar de mim" viam um painel vazio. O código de inicialização só era executado durante o login manual. Ele não era executado quando a sessão era restaurada.

Implementei três níveis de fallback para garantir que o centro sempre carregue:

  • Um wrapper na função de login.
  • Um loop de polling que verifica o usuário a cada 500ms.
  • Um MutationObserver que observa o perfil do usuário aparecer na tela.

Exemplos de Design Bem-sucedido

  • Use localStorage para rastrear o status de leitura por usuário.
  • Use índices compostos no Firestore para consultas complexas.
  • Use media queries para mover elementos fixos no celular para que eles não bloqueiem a barra superior.

A arquitetura importa. Use Firestore para logs e RTDB para atualizações em tempo real.

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