Costruire un Centro Notifiche in una PWA Firebase

Gestire un team di vendita richiede molti strumenti. Il mio pannello di controllo utilizzava notifiche push FCM, chat, promemoria e un calendario condiviso.

Il problema era che questi strumenti vivevano su isole separate. Un operatore doveva saltare da una sezione all'altra per controllare una richiesta di ferie o un messaggio. Non c'era un unico posto dove vedere tutto.

Ho costruito un centro notifiche. È una singola timeline per ogni evento rilevante.

Come ho utilizzato Firebase

Utilizzo sia Firestore che Realtime Database (RTDB). Ognuno serve a uno scopo specifico.

• Firestore per la cronologia: Usa .get() per i dati che non cambiano, come le richieste di ferie. Questo mantiene i costi bassi perché non è necessario un listener permanente. • RTDB per i dati in tempo reale: Usa .on('value') per chat, promemoria ed eventi del calendario. Questi nodi sono piccoli e devono reagire istantaneamente.

Scegliere quello sbagliato si riflette immediatamente nella fattura Firebase.

Le sfide tecniche

Costruire l'interfaccia utente ha richiesto la risoluzione di tre problemi principali:

  1. Usabilità mobile Ho usato flex-wrap: wrap per i chip di filtro. La mia prima versione utilizzava lo scorrimento orizzontale. Su mobile, gli utenti non riuscivano a vedere i chip e non sapevano di poter scorrere. Disporli su due righe ha risolto il problema.

  2. Posizionamento CSS Ho aggiunto il pannello direttamente a document.body. Se si annida un elemento fixed all'interno di un contenitore con overflow:hidden, il posizionamento si rompe.

  3. Il bug del ripristino della sessione In produzione, gli utenti che utilizzavano "ricordami" vedevano un pannello vuoto. Il codice di inizializzazione veniva eseguito solo durante l'accesso manuale. Non veniva eseguito al ripristino della sessione.

Ho implementato tre livelli di fallback per garantire che il centro si carichi sempre:

  • Un wrapper sulla funzione di login.
  • Un ciclo di polling che controlla l'utente ogni 500ms.
  • Un MutationObserver che monitora la comparsa del profilo utente sullo schermo.

Esempi di design efficace

  • Usa localStorage per tracciare lo stato di lettura per ogni utente.
  • Usa indici composti in Firestore per query complesse.
  • Usa le media query per spostare gli elementi fissi su mobile in modo che non blocchino la barra superiore.

L'architettura è importante. Usa Firestore per i log e RTDB per gli aggiornamenti in tempo reale.

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