Building a Notification Center in a Firebase PWA

Kusimamia timu ya mauzo kunahitaji zana nyingi. Paneli yangu ya udhibiti ilitumia arifa za FCM push, chats, vikumbusho, na kalenda ya pamoja.

Tatizo lilikuwa zana hizi zilikuwa zimetengana kama visiwa tofauti. Opereta alilazimika kuruka kati ya sehemu mbalimbali ili kuangalia ombi la likizo au ujumbe. Hakukuwa na sehemu moja ya kuona kila kitu.

Nilijenga kituo cha arifa. Ni mtiririko mmoja (timeline) wa kila tukio muhimu.

How I Used Firebase

Ninatumia Firestore na Realtime Database (RTDB). Kila moja ina kazi yake maalum.

• Firestore kwa historia: Tumia .get() kwa data ambayo haibadiliki, kama vile maombi ya likizo. Hii inafanya gharama kuwa ndogo kwa sababu huhitaji msikilizaji (listener) wa kudumu. • RTDB kwa data ya moja kwa moja: Tumia .on('value') kwa chat, vikumbusho, na matukio ya kalenda. Node hizi ni ndogo na zinahitaji kuitikia papo hapo.

Kuchagua isiyo sahihi huonekana mara moja kwenye bili yako ya Firebase.

The Technical Hurdles

Kujenga UI kulihitaji kutatua matatizo makuu matatu:

  1. Mobile Usability Nilitumia flex-wrap: wrap kwa ajili ya filter chips. Toleo langu la kwanza lilitumia kuteleza kuelekea pembeni (horizontal scrolling). Kwenye simu, watumiaji hawakuweza kuona chips hizo na hawakujua kuwa wangeweza kuteleza. Kuzifunga katika mistari miwili kulitatua hili.

  2. CSS Positioning Niliunganisha paneli moja kwa moja kwenye document.body. Ukifunga element ya fixed ndani ya container yenye overflow:hidden, nafasi yake inaharibika.

  3. The Session Restore Bug Katika mazingira ya uzalishaji (production), watumiaji wanaotumia "remember me" waliona paneli tupu. Code ya uanzishaji (initialization code) ilikimbizwa tu wakati wa kuingia (login) kwa mkono. Haikukimbizwa wakati kikao kinaporejeshwa.

Nilitekeleza viwango vitatu vya mbadala (fallback levels) ili kuhakikisha kituo kinajipakia kila wakati:

  • A wrapper kwenye function ya login.
  • A polling loop inayomkagua mtumiaji kila baada ya ms 500.
  • A MutationObserver inayofuatilia wasifu wa mtumiaji kutokea kwenye skrini.

Instances of Successful Design

  • Tumia localStorage kufuatilia hali ya kusomwa kwa kila mtumiaji.
  • Tumia composite indexes kwenye Firestore kwa maswali (queries) tata.
  • Tumia media queries kusogeza element za fixed kwenye simu ili zisizibe bar ya juu.

Muundo (Architecture) ni muhimu. Tumia Firestore kwa kumbukumbu (logs) na RTDB kwa sasisho za moja kwa moja (live updates).

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