Budowanie centrum powiadomień w aplikacji Firebase PWA

Zarządzanie zespołem sprzedażowym wymaga wielu narzędzi. Mój panel sterowania korzystał z powiadomień push FCM, czatów, przypomnień i współdzielonego kalendarza.

Problem polegał na tym, że narzędzia te funkcjonowały na osobnych „wyspach”. Operator musiał przełączać się między sekcjami, aby sprawdzić wniosek urlopowy lub wiadomość. Nie było jednego miejsca, w którym można by zobaczyć wszystko.

Zbudowałem centrum powiadomień. Jest to pojedyncza oś czasu dla każdego istotnego zdarzenia.

Jak wykorzystałem Firebase

Korzystam zarówno z Firestore, jak i Realtime Database (RTDB). Każde z nich służy do konkretnego celu.

• Firestore do historii: Używaj .get() dla danych, które się nie zmieniają, takich jak wnioski urlopowe. Pozwala to utrzymać niskie koszty, ponieważ nie potrzebujesz stałego nasłuchiwania (listener). • RTDB do danych na żywo: Używaj .on('value') dla czatu, przypomnień i wydarzeń w kalendarzu. Te węzły są małe i muszą reagować natychmiastowo.

Błędny wybór natychmiast odbije się na Twoim rachunku w Firebase.

Wyzwania techniczne

Budowa interfejsu użytkownika (UI) wymagała rozwiązania trzech głównych problemów:

  1. Używalność na urządzeniach mobilnych Użyłem flex-wrap: wrap dla chipów filtrujących. Moja pierwsza wersja korzystała z przewijania poziomego. Na urządzeniach mobilnych użytkownicy nie widzieli chipów i nie wiedzieli, że mogą przewijać. Rozwiązaniem było zawinięcie ich do dwóch rzędów.

  2. Pozycjonowanie CSS Dodałem panel bezpośrednio do document.body. Jeśli umieścisz element o pozycji fixed wewnątrz kontenera z overflow:hidden, pozycjonowanie przestanie działać poprawnie.

  3. Błąd przywracania sesji W środowisku produkcyjnym użytkownicy korzystający z opcji „zapamiętaj mnie” widzieli pusty panel. Kod inicjalizacyjny uruchamiał się tylko podczas ręcznego logowania. Nie działał podczas przywracania sesji.

Wdrożyłem trzy poziomy fallback, aby zapewnić, że centrum zawsze się ładuje:

  • Wrapper w funkcji logowania.
  • Pętla odpytująca (polling loop), która sprawdza użytkownika co 500 ms.
  • MutationObserver, który obserwuje pojawienie się profilu użytkownika na ekranie.

Przykłady udanego projektu

  • Używaj localStorage, aby śledzić status przeczytania dla każdego użytkownika.
  • Używaj indeksów złożonych w Firestore dla złożonych zapytań.
  • Używaj media queries, aby przesuwać elementy o pozycji fixed na urządzeniach mobilnych, tak aby nie blokowały górnego paska.

Architektura ma znaczenie. Używaj Firestore do logów, a RTDB do aktualizacji na żywo.

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