Firebase PWA'da Bir Bildirim Merkezi Oluşturmak

Bir satış ekibini yönetmek birçok araç gerektirir. Benim kontrol panelim FCM push bildirimleri, sohbetler, hatırlatıcılar ve ortak bir takvim kullanıyordu.

Sorun, bu araçların ayrı adacıklarda yaşıyor olmasıydı. Bir operatör, bir izin talebini veya bir mesajı kontrol etmek için bölümler arasında geçiş yapmak zorundaydı. Her şeyi görebileceği tek bir yer yoktu.

Bir bildirim merkezi inşa ettim. Bu, ilgili her olay için tek bir zaman çizelgesidir.

Firebase'i Nasıl Kullandım

Hem Firestore hem de Realtime Database (RTDB) kullanıyorum. Her biri belirli bir amaca hizmet ediyor.

• Geçmiş için Firestore: İzin talepleri gibi değişmeyen veriler için .get() kullanın. Bu, kalıcı bir dinleyiciye (listener) ihtiyaç duymadığınız için maliyetleri düşük tutar. • Canlı veriler için RTDB: Sohbet, hatırlatıcılar ve takvim etkinlikleri için .on('value') kullanın. Bu düğümler (nodes) küçüktür ve anında tepki vermeleri gerekir.

Yanlış olanı seçmek, Firebase faturanıza anında yansır.

Teknik Engeller

Kullanıcı arayüzünü (UI) oluşturmak üç ana sorunu çözmeyi gerektiriyordu:

  1. Mobil Kullanılabilirlik Filtre çipleri için flex-wrap: wrap kullandım. İlk versiyonum yatay kaydırma kullanıyordu. Mobilde kullanıcılar çipleri göremiyor ve kaydırabileceklerini bilmiyorlardı. Onları iki satıra sarmak bu sorunu çözdü.

  2. CSS Konumlandırma Paneli doğrudan document.body'ye ekledim. Eğer fixed bir öğeyi overflow:hidden olan bir kapsayıcının içine yerleştirirseniz, konumlandırma bozulur.

  3. Oturum Geri Yükleme Hatası Canlı ortamda (production), "beni hatırla" seçeneğini kullanan kullanıcılar boş bir panel görüyordu. Başlatma kodu sadece manuel giriş sırasında çalışıyordu. Oturum geri yüklendiğinde çalışmıyordu.

Merkezin her zaman yüklenmesini sağlamak için üç kademeli bir yedekleme (fallback) mekanizması uyguladım:

  • Giriş fonksiyonu üzerinde bir sarmalayıcı (wrapper).
  • Her 500ms'de bir kullanıcıyı kontrol eden bir sorgulama döngüsü (polling loop).
  • Kullanıcı profilinin ekranda görünmesini izleyen bir MutationObserver.

Başarılı Tasarım Örnekleri

  • Kullanıcı başına okundu durumunu takip etmek için localStorage kullanın.
  • Karmaşık sorgular için Firestore'da birleşik indeksler (composite indexes) kullanın.
  • Sabit öğeleri mobilde üst çubuğu engellemeyecek şekilde taşımak için medya sorguları (media queries) kullanın.

Mimari önemlidir. Günlükler (logs) için Firestore, canlı güncellemeler için RTDB kullanın.

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