Firebase PWA में एक नोटिफिकेशन सेंटर बनाना
सेल्स टीम को मैनेज करने के लिए कई टूल्स की ज़रूरत होती है। मेरे कंट्रोल पैनल में FCM पुश नोटिफिकेशन, चैट, रिमाइंडर और एक साझा कैलेंडर का उपयोग किया गया था।
समस्या यह थी कि ये सभी टूल्स अलग-अलग हिस्सों में बँटे हुए थे। किसी छुट्टी के अनुरोध (leave request) या मैसेज को देखने के लिए ऑपरेटर को अलग-अलग सेक्शन के बीच स्विच करना पड़ता था। सब कुछ एक ही जगह देखने के लिए कोई एकल स्थान नहीं था।
मैंने एक नोटिफिकेशन सेंटर बनाया। यह हर प्रासंगिक इवेंट (relevant event) के लिए एक सिंगल टाइमलाइन है।
मैंने Firebase का उपयोग कैसे किया
मैं Firestore और Realtime Database (RTDB) दोनों का उपयोग करता हूँ। प्रत्येक का अपना विशिष्ट उद्देश्य है।
• हिस्ट्री के लिए Firestore: उस डेटा के लिए .get() का उपयोग करें जो बदलता नहीं है, जैसे कि छुट्टी के अनुरोध। इससे लागत कम रहती है क्योंकि आपको एक स्थायी लिसनर (permanent listener) की आवश्यकता नहीं होती है।
• लाइव डेटा के लिए RTDB: चैट, रिमाइंडर और कैलेंडर इवेंट्स के लिए .on('value') का उपयोग करें। ये नोड्स छोटे होते हैं और इन्हें तुरंत प्रतिक्रिया देने की आवश्यकता होती है।
गलत चुनाव का असर तुरंत आपके Firebase बिल में दिखाई देने लगता है।
तकनीकी बाधाएं
UI बनाने के लिए तीन मुख्य समस्याओं को हल करना आवश्यक था:
1. मोबाइल उपयोगिता (Mobile Usability)
मैंने फ़िल्टर चिप्स के लिए flex-wrap: wrap का उपयोग किया। मेरे पहले वर्ज़न में हॉरिजॉन्टल स्क्रॉलिंग का उपयोग किया गया था। मोबाइल पर, उपयोगकर्ता चिप्स को देख नहीं पाते थे और उन्हें पता नहीं चलता था कि वे स्क्रॉल कर सकते हैं। उन्हें दो पंक्तियों (rows) में लपेटने (wrapping) से यह समस्या हल हो गई।
2. CSS पोजिशनिंग
मैंने पैनल को सीधे document.body में जोड़ दिया। यदि आप overflow:hidden वाले कंटेनर के अंदर किसी fixed एलिमेंट को नेस्ट करते हैं, तो उसकी पोजिशनिंग खराब हो जाती है।
3. सेशन रिस्टोर बग
प्रोडक्शन में, "remember me" का उपयोग करने वाले उपयोगकर्ताओं को खाली पैनल दिखाई देता था। इनिशियलाइज़ेशन कोड केवल मैन्युअल लॉगिन के दौरान ही चलता था। सेशन रिस्टोर होने पर यह नहीं चलता था।
मैंने यह सुनिश्चित करने के लिए तीन फॉलबैक (fallback) स्तर लागू किए कि सेंटर हमेशा लोड हो:
- लॉगिन फंक्शन पर एक रैपर।
- एक पोलिंग लूप जो हर 500ms में यूजर को चेक करता है।
- एक
MutationObserverजो स्क्रीन पर यूजर प्रोफाइल के दिखने का इंतज़ार करता है।
सफल डिज़ाइन के उदाहरण
- प्रति यूजर रीड स्टेटस (read status) को ट्रैक करने के लिए
localStorageका उपयोग करें। - जटिल क्वेरीज़ के लिए Firestore में कंपोजिट इंडेक्स (composite indexes) का उपयोग करें।
- मोबाइल पर
fixedएलिमेंट्स को मूव करने के लिए मीडिया क्वेरीज़ का उपयोग करें ताकि वे टॉप बार को ब्लॉक न करें।
आर्किटेक्चर मायने रखता है। लॉग्स के लिए Firestore और लाइव अपडेट्स के लिए RTDB का उपयोग करें।