ਇੱਕ Firebase PWA ਵਿੱਚ ਨੋਟੀਫਿਕੇਸ਼ਨ ਸੈਂਟਰ ਬਣਾਉਣਾ

ਇੱਕ ਸੇਲਜ਼ ਟੀਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਕਈ ਸਾਧਨਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਮੇਰੇ ਕੰਟਰੋਲ ਪੈਨਲ ਵਿੱਚ FCM ਪੁਸ਼ ਨੋਟੀਫਿਕੇਸ਼ਨ, ਚੈਟਸ, ਰੀਮਾਈਂਡਰ ਅਤੇ ਇੱਕ ਸਾਂਝਾ ਕੈਲੰਡਰ ਵਰਤੇ ਜਾਂਦੇ ਸਨ।

ਸਮੱਸਿਆ ਇਹ ਸੀ ਕਿ ਇਹ ਸਾਧਨ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡੇ ਹੋਏ ਸਨ। ਇੱਕ ਓਪਰੇਟਰ ਨੂੰ ਛੁੱਟੀ ਦੀ ਬੇਨਤੀ ਜਾਂ ਕੋਈ ਸੁਨੇਹਾ ਚੈੱਕ ਕਰਨ ਲਈ ਵੱਖ-ਵੱਖ ਸੈਕਸ਼ਨਾਂ ਵਿੱਚ ਜਾਣਾ ਪੈਂਦਾ ਸੀ। ਸਭ ਕੁਝ ਦੇਖਣ ਲਈ ਕੋਈ ਇੱਕ ਸਥਾਨ ਨਹੀਂ ਸੀ।

ਮੈਂ ਇੱਕ ਨੋਟੀਫਿਕੇਸ਼ਨ ਸੈਂਟਰ ਬਣਾਇਆ। ਇਹ ਹਰ ਮਹੱਤਵਪੂਰਨ ਘਟਨਾ ਲਈ ਇੱਕ ਸਿੰਗਲ ਟਾਈਮਲਾਈਨ ਹੈ।

ਮੈਂ Firebase ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ

ਮੈਂ Firestore ਅਤੇ Realtime Database (RTDB) ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ। ਹਰੇਕ ਦਾ ਇੱਕ ਖਾਸ ਉਦੇਸ਼ ਹੈ।

• ਇਤਿਹਾਸ ਲਈ Firestore: ਉਸ ਡੇਟਾ ਲਈ .get() ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਬਦਲਦਾ ਨਹੀਂ ਹੈ, ਜਿਵੇਂ ਕਿ ਛੁੱਟੀ ਦੀਆਂ ਬੇਨਤੀਆਂ। ਇਹ ਲਾਗਤ ਨੂੰ ਘੱਟ ਰੱਖਦਾ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਪੱਕੇ ਲਿਸਨਰ (listener) ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। • ਲਾਈਵ ਡੇਟਾ ਲਈ RTDB: ਚੈਟ, ਰੀਮਾਈਂਡਰ ਅਤੇ ਕੈਲੰਡਰ ਘਟਨਾਵਾਂ ਲਈ .on('value') ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਨੋਡਸ ਛੋਟੇ ਹੁੰਦੇ ਹਨ ਅਤੇ ਇਨ੍ਹਾਂ ਨੂੰ ਤੁਰੰਤ ਪ੍ਰਤੀਕਿਰਿਆ ਦੇਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਗਲਤ ਚੋਣ ਕਰਨ ਦਾ ਅਸਰ ਤੁਰੰਤ ਤੁਹਾਡੇ Firebase ਬਿੱਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਤਕਨੀਕੀ ਰੁਕਾਵਟਾਂ

UI ਬਣਾਉਣ ਲਈ ਤਿੰਨ ਮੁੱਖ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੀ ਲੋੜ ਸੀ:

  1. ਮੋਬਾਈਲ ਵਰਤੋਂਯੋਗਤਾ (Mobile Usability) ਮੈਂ ਫਿਲਟਰ ਚਿਪਸ ਲਈ flex-wrap: wrap ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਮੇਰੇ ਪਹਿਲੇ ਵਰਜ਼ਨ ਵਿੱਚ ਹੋਰੀਜ਼ੋਂਟਲ ਸਕ੍ਰੋਲਿੰਗ (horizontal scrolling) ਸੀ। ਮੋਬਾਈਲ 'ਤੇ, ਯੂਜ਼ਰ ਚਿਪਸ ਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦੇ ਸਨ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਪਤਾ ਨਹੀਂ ਸੀ ਕਿ ਉਹ ਸਕ੍ਰੋਲ ਕਰ ਸਕਦੇ ਹਨ। ਉਨ੍ਹਾਂ ਨੂੰ ਦੋ ਲਾਈਨਾਂ ਵਿੱਚ ਲਿਆਉਣ ਨਾਲ ਇਹ ਸਮੱਸਿਆ ਹੱਲ ਹੋ ਗਈ।

  2. CSS ਪੋਜੀਸ਼ਨਿੰਗ (CSS Positioning) ਮੈਂ ਪੈਨਲ ਨੂੰ ਸਿੱਧਾ document.body ਨਾਲ ਜੋੜ ਦਿੱਤਾ। ਜੇਕਰ ਤੁਸੀਂ overflow:hidden ਵਾਲੇ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਇੱਕ ਫਿਕਸਡ (fixed) ਐਲੀਮੈਂਟ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਪੋਜੀਸ਼ਨਿੰਗ ਵਿਗੜ ਜਾਂਦੀ ਹੈ।

  3. ਸੈਸ਼ਨ ਰਿਸਟੋਰ ਬੱਗ (The Session Restore Bug) ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ, "remember me" ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਇੱਕ ਖਾਲੀ ਪੈਨਲ ਦਿਖਾਈ ਦਿੰਦਾ ਸੀ। ਇਨੀਸ਼ੀਅਲਾਈਜ਼ੇਸ਼ਨ ਕੋਡ ਸਿਰਫ ਮੈਨੂਅਲ ਲੌਗਇਨ ਦੌਰਾਨ ਚੱਲਦਾ ਸੀ। ਜਦੋਂ ਸੈਸ਼ਨ ਰਿਸਟੋਰ ਹੁੰਦਾ ਸੀ, ਤਾਂ ਇਹ ਨਹੀਂ ਚੱਲਦਾ ਸੀ।

ਮੈਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਤਿੰਨ ਫਾਲਬੈਕ (fallback) ਪੱਧਰ ਲਾਗੂ ਕੀਤੇ ਕਿ ਸੈਂਟਰ ਹਮੇਸ਼ਾ ਲੋਡ ਹੋਵੇ:

  • ਲੌਗਇਨ ਫੰਕਸ਼ਨ 'ਤੇ ਇੱਕ ਵੈਪਰ (wrapper)।
  • ਇੱਕ ਪੋਲਿੰਗ ਲੂਪ (polling loop) ਜੋ ਹਰ 500ms ਵਿੱਚ ਯੂਜ਼ਰ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ।
  • ਇੱਕ MutationObserver ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਯੂਜ਼ਰ ਪ੍ਰੋਫਾਈਲ ਦੇ ਦਿਖਾਈ ਦੇਣ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦਾ ਹੈ।

ਸਫਲ ਡਿਜ਼ਾਈਨ ਦੇ ਉਦਾਹਰਣ

  • ਹਰੇਕ ਯੂਜ਼ਰ ਲਈ ਪੜ੍ਹੇ ਜਾਣ ਦੀ ਸਥਿਤੀ (read status) ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ localStorage ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਗੁੰਝਲਦਾਰ ਕੁਏਰੀਆਂ (complex queries) ਲਈ Firestore ਵਿੱਚ ਕੰਪੋਜ਼ਿਟ ਇੰਡੈਕਸ (composite indexes) ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਮੋਬਾਈਲ 'ਤੇ ਫਿਕਸਡ ਐਲੀਮੈਂਟਸ ਨੂੰ ਹਿਲਾਉਣ ਲਈ ਮੀਡੀਆ ਕੁਏਰੀਆਂ (media queries) ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਉਹ ਟੌਪ ਬਾਰ ਨੂੰ ਰੋਕਣ ਨਾ।

ਆਰਕੀਟੈਕਚਰ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਲੌਗਸ ਲਈ Firestore ਅਤੇ ਲਾਈਵ ਅਪਡੇਟਸ ਲਈ RTDB ਦੀ ਵਰਤੋਂ ਕਰੋ।

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