Создание центра уведомлений в Firebase PWA

Управление отделом продаж требует множества инструментов. В моей панели управления использовались push-уведомления FCM, чаты, напоминания и общий календарь.

Проблема заключалась в том, что эти инструменты существовали как отдельные «острова». Оператору приходилось переключаться между разделами, чтобы проверить запрос на отпуск или сообщение. Не было единого места, где можно было бы увидеть всё сразу.

Я создал центр уведомлений. Это единая временная шкала для всех важных событий.

Как я использовал Firebase

Я использую и Firestore, и Realtime Database (RTDB). Каждый из них служит определенной цели.

• Firestore для истории: используйте .get() для данных, которые не меняются, например, для запросов на отпуск. Это позволяет снизить затраты, так как вам не нужен постоянный слушатель (listener). • RTDB для живых данных: используйте .on('value') для чатов, напоминаний и событий календаря. Эти узлы небольшие и должны реагировать мгновенно.

Неправильный выбор сразу отразится на вашем счете в Firebase.

Технические трудности

Создание интерфейса потребовало решения трех основных проблем:

  1. Mobile Usability Я использовал flex-wrap: wrap для чипов фильтрации. В моей первой версии использовалась горизонтальная прокрутка. На мобильных устройствах пользователи не видели чипы и не понимали, что их можно прокрутить. Перенос их в две строки решил эту проблему.

  2. CSS Positioning Я добавил панель напрямую в document.body. Если вложить элемент с position: fixed внутрь контейнера с overflow:hidden, позиционирование сломается.

  3. The Session Restore Bug В рабочей среде пользователи, выбравшие «запомнить меня», видели пустую панель. Код инициализации запускался только при ручном входе в систему. Он не срабатывал при восстановлении сессии.

Я реализовал три уровня резервного восстановления, чтобы гарантировать постоянную загрузку центра:

  • Обертка вокруг функции входа.
  • Цикл опроса (polling), который проверяет наличие пользователя каждые 500 мс.
  • MutationObserver, который отслеживает появление профиля пользователя на экране.

Примеры удачного дизайна

  • Используйте localStorage для отслеживания статуса прочтения для каждого пользователя.
  • Используйте составные индексы в Firestore для сложных запросов.
  • Используйте медиазапросы, чтобы перемещать фиксированные элементы на мобильных устройствах, чтобы они не перекрывали верхнюю панель.

Архитектура имеет значение. Используйте Firestore для логов, а RTDB — для обновлений в реальном времени.

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