Firebase PWAで通知センターを構築する
セールスチームの管理には多くのツールが必要です。私のコントロールパネルでは、FCMプッシュ通知、チャット、リマインダー、共有カレンダーを使用していました。
問題は、これらのツールがそれぞれ独立した「島」のように存在していたことです。オペレーターは休暇申請やメッセージを確認するために、セクション間を何度も移動しなければなりませんでした。すべてを一箇所で確認できる場所がなかったのです。
そこで、通知センターを構築しました。これは、あらゆる関連イベントを一つのタイムラインにまとめたものです。
Firebaseの使い方
私はFirestoreとRealtime Database (RTDB)の両方を使用しています。それぞれに特定の役割があります。
• 履歴にはFirestoreを使用：休暇申請など、変化しないデータには .get() を使用します。常時リスナーを必要としないため、コストを低く抑えられます。
• ライブデータにはRTDBを使用：チャット、リマインダー、カレンダーイベントには .on('value') を使用します。これらのノードはサイズが小さく、即座に反応させる必要があるためです。
選択を誤ると、Firebaseの利用料金に即座に跳ね返ってきます。
技術的なハードル
UIの構築には、主に3つの課題の解決が必要でした。
1. モバイルでの使いやすさ
フィルターチップには flex-wrap: wrap を使用しました。最初のバージョンでは横スクロールを採用していましたが、モバイルではチップが見えず、スクロールできることにも気づいてもらえませんでした。2行に折り返すことで、この問題は解決しました。
2. CSSのポジショニング
パネルを document.body に直接追加しました。overflow:hidden が設定されたコンテナの中に fixed 要素をネストすると、ポジショニングが崩れてしまうためです。
3. セッション復元時のバグ
本番環境において、「ログイン状態を保持する」機能を利用しているユーザーのパネルが空になってしまう問題が発生しました。初期化コードが手動ログイン時にしか実行されず、セッションが復元されたときには実行されていなかったのです。
通知センターが必ず読み込まれるよう、3つのフォールバック・レベルを実装しました：
- ログイン関数へのラッパー。
- 500msごとにユーザーを確認するポーリングループ。
- ユーザープロフィールが画面に表示されるのを監視する
MutationObserver。
設計の成功例
localStorageを使用して、ユーザーごとの既読ステータスを追跡する。- 複雑なクエリにはFirestoreの複合インデックスを使用する。
- メディアクエリを使用して、モバイルで
fixed要素の位置を調整し、トップバーを塞がないようにする。
アーキテクチャが重要です。ログにはFirestoreを、ライブアップデートにはRTDBを使用しましょう。