ഒരു Firebase PWA-യിൽ ഒരു നോട്ടിഫിക്കേഷൻ സെന്റർ നിർമ്മിക്കുന്നു
ഒരു സെയിൽസ് ടീമിനെ നിയന്ത്രിക്കുന്നതിന് നിരവധി ടൂളുകൾ ആവശ്യമാണ്. എന്റെ കൺട്രോൾ പാനലിൽ FCM പുഷ് നോട്ടിഫിക്കേഷനുകൾ, ചാറ്റുകൾ, റിമൈൻഡറുകൾ, ഒരു ഷെയർഡ് കലണ്ടർ എന്നിവ ഉപയോഗിച്ചിരുന്നു.
പ്രശ്നം എന്തെന്നാൽ ഈ ടൂളുകൾ വ്യത്യസ്ത ഭാഗങ്ങളിലായി ചിതറിക്കിടക്കുകയായിരുന്നു എന്നതാണ്. ഒരു ലീവ് റിക്വസ്റ്റോ സന്ദേശമോ പരിശോധിക്കാൻ ഒരു ഓപ്പറേറ്റർക്ക് പല സെക്ഷനുകൾക്കിടയിൽ മാറേണ്ടി വന്നു. എല്ലാം ഒരിടത്ത് കാണാൻ സാധിക്കുന്ന ഒരു സംവിധാനം അവിടെ ഉണ്ടായിരുന്നില്ല.
ഞാൻ ഒരു നോട്ടിഫിക്കേഷൻ സെന്റർ നിർമ്മിച്ചു. പ്രസക്തമായ എല്ലാ സംഭവങ്ങളും കാണാൻ കഴിയുന്ന ഒരൊറ്റ ടൈംലൈൻ ആണിത്.
ഞാൻ എങ്ങനെ Firebase ഉപയോഗിച്ചു
ഞാൻ Firestore-ഉം Realtime Database (RTDB)-ഉം ഉപയോഗിക്കുന്നു. ഇവ രണ്ടും ഓരോ പ്രത്യേക ആവശ്യങ്ങൾക്കായി ഉപയോഗിക്കുന്നു.
• ഹിസ്റ്ററിക്ക് വേണ്ടി Firestore: ലീവ് റിക്വസ്റ്റുകൾ പോലുള്ള മാറാത്ത ഡാറ്റകൾക്കായി .get() ഉപയോഗിക്കുക. ഇതിനായി ഒരു പെർമനന്റ് ലിസണർ (permanent listener) ആവശ്യമില്ലാത്തതിനാൽ ചിലവ് കുറയ്ക്കാൻ ഇത് സഹായിക്കുന്നു.
• ലൈവ് ഡാറ്റയ്ക്ക് വേണ്ടി RTDB: ചാറ്റ്, റിമൈൻഡറുകൾ, കലണ്ടർ ഇവന്റുകൾ എന്നിവയ്ക്കായി .on('value') ഉപയോഗിക്കുക. ഈ നോഡുകൾ ചെറുതും പെട്ടെന്ന് പ്രതികരിക്കേണ്ടവയുമാണ്.
തെറ്റായ ഒന്ന് തിരഞ്ഞെടുക്കുന്നത് നിങ്ങളുടെ Firebase ബില്ലിൽ ഉടൻ തന്നെ പ്രതിഫലിക്കും.
സാങ്കേതികമായ വെല്ലുവിളികൾ
UI നിർമ്മിക്കുന്നതിന് പ്രധാനമായും മൂന്ന് പ്രശ്നങ്ങൾ പരിഹരിക്കേണ്ടി വന്നു:
1. മൊബൈൽ ഉപയോഗക്ഷമത (Mobile Usability)
ഫിൽട്ടർ ചിപ്പുകൾക്കായി (filter chips) ഞാൻ flex-wrap: wrap ഉപയോഗിച്ചു. എന്റെ ആദ്യ പതിപ്പിൽ ഹൊറിസോണ്ടൽ സ്ക്രോളിംഗ് ആയിരുന്നു ഉണ്ടായിരുന്നത്. മൊബൈലിൽ, ഉപയോക്താക്കൾക്ക് ചിപ്പുകൾ കാണാൻ കഴിയാത്തതുകൊണ്ടും സ്ക്രോൾ ചെയ്യാമെന്ന് അറിയാത്തതുകൊണ്ടും ബുദ്ധിമുട്ട് നേരിട്ടു. അവയെ രണ്ട് വരികളായി ക്രമീകരിച്ചതോടെ ഈ പ്രശ്നം പരിഹരിക്കപ്പെട്ടു.
2. CSS പൊസിഷനിംഗ് (CSS Positioning)
ഞാൻ പാനൽ നേരിട്ട് document.body-ലേക്ക് ആപ്പൻഡ് (append) ചെയ്തു. overflow:hidden ഉള്ള ഒരു കണ്ടെയ്നറിനുള്ളിൽ ഒരു fixed എലമെന്റ് നൽകിയാൽ അതിന്റെ പൊസിഷനിംഗ് തെറ്റാൻ സാധ്യതയുണ്ട്.
3. സെഷൻ റീസ്റ്റോർ ബഗ് (The Session Restore Bug)
പ്രൊഡക്ഷനിൽ, "remember me" ഉപയോഗിക്കുന്ന ഉപയോക്താക്കൾക്ക് കാലിയായ ഒരു പാനൽ മാത്രമാണ് കാണാൻ സാധിച്ചത്. മാനുവൽ ലോഗിൻ സമയത്ത് മാത്രമാണ് ഇനീഷ്യലൈസേഷൻ കോഡ് പ്രവർത്തിച്ചിരുന്നത്. സെഷൻ റീസ്റ്റോർ ചെയ്യുമ്പോൾ അത് പ്രവർത്തിച്ചിരുന്നില്ല.
നോട്ടിഫിക്കേഷൻ സെന്റർ എപ്പോഴും ലോഡ് ആകുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ ഞാൻ മൂന്ന് ഫാള்பാക്ക് (fallback) ലെവലുകൾ നടപ്പിലാക്കി:
- ലോഗിൻ ഫംഗ്ഷനിൽ ഒരു റാപ്പർ (wrapper).
- ഓരോ 500ms കൂടുമ്പോഴും ഉപയോക്താവിനെ പരിശോധിക്കുന്ന ഒരു പോളിംഗ് ലൂപ്പ് (polling loop).
- യൂസർ പ്രൊഫൈൽ സ്ക്രീനിൽ പ്രത്യക്ഷപ്പെടുന്നുണ്ടോ എന്ന് നിരീക്ഷിക്കുന്ന ഒരു
MutationObserver.
വിജയകരമായ ഡിസൈൻ രീതികൾ
- ഓരോ ഉപയോക്താവിന്റെയും റീഡ് സ്റ്റാറ്റസ് (read status) ട്രാക്ക് ചെയ്യാൻ
localStorageഉപയോഗിക്കുക. - സങ്കീർണ്ണമായ ക്വറികൾക്കായി Firestore-ൽ കോമ്പോസിറ്റ് ഇൻഡക്സുകൾ (composite indexes) ഉപയോഗിക്കുക.
- മൊബൈലിൽ ഫിക്സഡ് എലമെന്റുകൾ ടോപ്പ് ബാർ തടസ്സപ്പെടുത്താതിരിക്കാൻ മീഡിയ ക്വറികൾ (media queries) ഉപയോഗിക്കുക.
ആർക്കിടെക്ചർ വളരെ പ്രധാനമാണ്. ലോഗുകൾക്കായി Firestore-ഉം ലൈവ് അപ്ഡേറ്റുകൾക്കായി RTDB-യും ഉപയോഗിക്കുക.