Xây dựng Trung tâm Thông báo trong một Firebase PWA

Quản lý một đội ngũ bán hàng đòi hỏi rất nhiều công cụ. Bảng điều khiển của tôi sử dụng thông báo đẩy FCM, chat, lời nhắc và một lịch dùng chung.

Vấn đề là các công cụ này nằm ở những "hòn đảo" riêng biệt. Một người vận hành phải chuyển đổi qua lại giữa các phần để kiểm tra một yêu cầu nghỉ phép hoặc một tin nhắn. Không có một nơi duy nhất để xem mọi thứ.

Tôi đã xây dựng một trung tâm thông báo. Đó là một dòng thời gian duy nhất cho mọi sự kiện liên quan.

Cách tôi sử dụng Firebase

Tôi sử dụng cả Firestore và Realtime Database (RTDB). Mỗi loại phục vụ một mục đích cụ thể.

• Firestore cho lịch sử: Sử dụng .get() cho dữ liệu không thay đổi, chẳng hạn như các yêu cầu nghỉ phép. Điều này giúp giữ chi phí thấp vì bạn không cần một listener vĩnh viễn. • RTDB cho dữ liệu trực tiếp: Sử dụng .on('value') cho chat, lời nhắc và các sự kiện lịch. Các node này có kích thước nhỏ và cần phản hồi ngay lập tức.

Việc chọn sai sẽ hiển thị ngay lập tức trên hóa đơn Firebase của bạn.

Những rào cản kỹ thuật

Xây dựng giao diện người dùng (UI) đòi hỏi phải giải quyết ba vấn đề chính:

  1. Khả năng sử dụng trên di động Tôi đã sử dụng flex-wrap: wrap cho các filter chips. Phiên bản đầu tiên của tôi sử dụng thanh cuộn ngang. Trên di động, người dùng không thấy các chip và không biết rằng họ có thể cuộn. Việc bọc chúng thành hai hàng đã khắc phục được vấn đề này.

  2. Định vị CSS Tôi đã append bảng điều khiển trực tiếp vào document.body. Nếu bạn lồng một phần tử fixed bên trong một container có overflow:hidden, việc định vị sẽ bị lỗi.

  3. Lỗi khôi phục phiên làm việc Trong môi trường production, những người dùng sử dụng tính năng "remember me" thấy một bảng điều khiển trống rỗng. Mã khởi tạo chỉ chạy trong quá trình đăng nhập thủ công. Nó không chạy khi phiên làm việc được khôi phục.

Tôi đã triển khai ba cấp độ fallback để đảm bảo trung tâm luôn tải được:

  • Một wrapper cho hàm đăng nhập.
  • Một vòng lặp polling kiểm tra người dùng mỗi 500ms.
  • Một MutationObserver theo dõi sự xuất hiện của hồ sơ người dùng trên màn hình.

Các ví dụ về thiết kế thành công

  • Sử dụng localStorage để theo dõi trạng thái đã đọc của từng người dùng.
  • Sử dụng composite indexes trong Firestore cho các truy vấn phức tạp.
  • Sử dụng media queries để di chuyển các phần tử fixed trên di động để chúng không chặn thanh bar phía trên.

Kiến trúc rất quan trọng. Hãy sử dụng Firestore cho nhật ký (logs) và RTDB cho các cập nhật trực tiếp.

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