ساخت یک مرکز اعلان (Notification Center) در یک Firebase PWA
مدیریت یک تیم فروش به ابزارهای زیادی نیاز دارد. پنل کنترل من از اعلانهای push FCM، چتها، یادآوریها و یک تقویم مشترک استفاده میکرد.
مشکل این بود که این ابزارها در جزایر جداگانهای بودند. یک اپراتور مجبور بود برای بررسی یک درخواست مرخصی یا یک پیام، بین بخشهای مختلف جابهجا شود. هیچ مکان واحدی برای دیدن همه چیز وجود نداشت.
من یک مرکز اعلان ساختم. این مرکز یک تایملاین واحد برای هر رویداد مرتبط است.
نحوه استفاده من از Firebase
من از هر دو سرویس Firestore و Realtime Database (RTDB) استفاده میکنم. هر کدام هدف خاصی را دنبال میکنند.
• Firestore برای تاریخچه: از .get() برای دادههایی که تغییر نمیکنند، مانند درخواستهای مرخصی، استفاده کنید. این کار هزینهها را پایین نگه میدارد زیرا نیازی به یک listener دائمی ندارید.
• RTDB برای دادههای زنده: از .on('value') برای چت، یادآوریها و رویدادهای تقویم استفاده کنید. این گرهها (nodes) کوچک هستند و نیاز دارند فوراً واکنش نشان دهند.
انتخاب اشتباه، بلافاصله در صورتحساب Firebase شما خود را نشان میدهد.
چالشهای فنی
ساخت رابط کاربری (UI) مستلزم حل سه مشکل اصلی بود:
۱. قابلیت استفاده در موبایل
من از flex-wrap: wrap برای چیپهای فیلتر (filter chips) استفاده کردم. نسخه اول من از اسکرول افقی استفاده میکرد. در موبایل، کاربران نمیتوانستند چیپها را ببینند و نمیدانستند که امکان اسکرول وجود دارد. قرار دادن آنها در دو ردیف، این مشکل را حل کرد.
۲. موقعیتدهی CSS
من پنل را مستقیماً به document.body اضافه کردم. اگر یک عنصر fixed را داخل کانتینری با overflow:hidden قرار دهید، موقعیتدهی به هم میریزد.
۳. باگ بازیابی نشست (Session Restore Bug)
در محیط عملیاتی (production)، کاربرانی که از گزینه "remember me" استفاده میکردند، یک پنل خالی میدیدند. کد مقداردهی اولیه (initialization) فقط هنگام ورود دستی اجرا میشد و هنگام بازیابی نشست (session restore) اجرا نمیشد.
من سه سطح جایگزین (fallback) پیادهسازی کردم تا مطمئن شوم مرکز اعلان همیشه بارگذاری میشود:
- یک wrapper روی تابع ورود (login function).
- یک حلقه polling که هر ۵۰۰ میلیثانیه کاربر را بررسی میکند.
- یک
MutationObserverکه ظاهر شدن پروفایل کاربر در صفحه را زیر نظر میگیرد.
نمونههایی از طراحی موفق
- استفاده از
localStorageبرای ردیابی وضعیت خوانده شدن (read status) برای هر کاربر. - استفاده از ایندکسهای ترکیبی (composite indexes) در Firestore برای پرسوجوهای (queries) پیچیده.
- استفاده از media queries برای جابهجایی عناصر
fixedدر موبایل تا نوار بالایی (top bar) را مسدود نکنند.
معماری اهمیت دارد. از Firestore برای لاگها و از RTDB برای بهروزرسانیهای زنده استفاده کنید.