Membina Pusat Pemberitahuan dalam PWA Firebase

Menguruskan pasukan jualan memerlukan banyak alatan. Panel kawalan saya menggunakan pemberitahuan push FCM, sembang, peringatan, dan kalendar kongsi.

Masalahnya ialah alatan ini berada di platform yang berasingan. Seorang operator terpaksa beralih antara bahagian untuk menyemak permohonan cuti atau mesej. Tiada satu tempat tunggal untuk melihat segalanya.

Saya membina sebuah pusat pemberitahuan. Ia merupakan satu garis masa tunggal untuk setiap acara yang berkaitan.

Bagaimana Saya Menggunakan Firebase

Saya menggunakan kedua-dua Firestore dan Realtime Database (RTDB). Setiap satunya mempunyai tujuan khusus.

• Firestore untuk sejarah: Gunakan .get() untuk data yang tidak berubah, seperti permohonan cuti. Ini mengekalkan kos yang rendah kerana anda tidak memerlukan pendengar (listener) kekal. • RTDB untuk data langsung: Gunakan .on('value') untuk sembang, peringatan, dan acara kalendar. Nod-nod ini adalah kecil dan perlu bertindak balas dengan serta-merta.

Memilih yang salah akan memberi kesan serta-merta pada bil Firebase anda.

Cabaran Teknikal

Membina UI memerlukan penyelesaian bagi tiga masalah utama:

  1. Kebolehgunaan Mudah Alih Saya menggunakan flex-wrap: wrap untuk cip penapis (filter chips). Versi pertama saya menggunakan skrol mendatar. Pada peranti mudah alih, pengguna tidak dapat melihat cip tersebut dan tidak tahu bahawa mereka boleh menatal. Menyusunnya ke dalam dua baris telah menyelesaikan masalah ini.

  2. Kedudukan CSS Saya menambah panel tersebut secara terus ke document.body. Jika anda memasukkan elemen fixed di dalam kontena dengan overflow:hidden, kedudukannya akan rosak.

  3. Pepijat Pemulihan Sesi Dalam persekitaran produksi, pengguna yang menggunakan "remember me" melihat panel yang kosong. Kod inisialisasi hanya berjalan semasa log masuk manual. Ia tidak berjalan apabila sesi dipulihkan.

Saya melaksanakan tiga tahap sandaran (fallback) untuk memastikan pusat tersebut sentiasa dimuatkan:

  • Sebuah pembungkus (wrapper) pada fungsi log masuk.
  • Satu gelung polling yang menyemak pengguna setiap 500ms.
  • Sebuah MutationObserver yang memerhati profil pengguna untuk muncul di skrin.

Contoh Reka Bentuk yang Berjaya

  • Gunakan localStorage untuk menjejaki status bacaan bagi setiap pengguna.
  • Gunakan indeks komposit dalam Firestore untuk pertanyaan (queries) yang kompleks.
  • Gunakan media queries untuk menggerakkan elemen fixed pada peranti mudah alih supaya ia tidak menghalang bar atas.

Seni bina adalah penting. Gunakan Firestore untuk log dan RTDB untuk kemas kini langsung.

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