Créer un centre de notifications dans une PWA Firebase
La gestion d'une équipe de vente nécessite de nombreux outils. Mon panneau de contrôle utilisait les notifications push FCM, des chats, des rappels et un calendrier partagé.
Le problème était que ces outils étaient isolés les uns des autres. Un opérateur devait passer d'une section à l'autre pour vérifier une demande de congé ou un message. Il n'y avait pas d'endroit unique pour tout voir.
J'ai construit un centre de notifications. Il s'agit d'une chronologie unique pour chaque événement pertinent.
Comment j'ai utilisé Firebase
J'utilise à la fois Firestore et Realtime Database (RTDB). Chacun remplit un rôle spécifique.
• Firestore pour l'historique : Utilisez .get() pour les données qui ne changent pas, comme les demandes de congé. Cela permet de limiter les coûts car vous n'avez pas besoin d'un écouteur permanent. • RTDB pour les données en direct : Utilisez .on('value') pour le chat, les rappels et les événements du calendrier. Ces nœuds sont légers et doivent réagir instantanément.
Choisir le mauvais outil se répercute immédiatement sur votre facture Firebase.
Les défis techniques
La construction de l'interface utilisateur a nécessité la résolution de trois problèmes principaux :
Utilisabilité sur mobile J'ai utilisé flex-wrap: wrap pour les puces de filtrage. Ma première version utilisait un défilement horizontal. Sur mobile, les utilisateurs ne voyaient pas les puces et ne savaient pas qu'ils pouvaient faire défiler l'écran. Le fait de les répartir sur deux lignes a réglé le problème.
Positionnement CSS J'ai ajouté le panneau directement à document.body. Si vous imbriquez un élément fixe à l'intérieur d'un conteneur avec overflow:hidden, le positionnement est brisé.
Le bug de restauration de session En production, les utilisateurs utilisant l'option « se souvenir de moi » voyaient un panneau vide. Le code d'initialisation ne s'exécutait que lors d'une connexion manuelle. Il ne s'exécutait pas lors de la restauration de la session.
J'ai mis en place trois niveaux de repli pour garantir que le centre se charge toujours :
- Un wrapper sur la fonction de connexion.
- Une boucle de polling qui vérifie la présence de l'utilisateur toutes les 500 ms.
- Un MutationObserver qui surveille l'apparition du profil utilisateur à l'écran.
Exemples de conception réussie
- Utilisez localStorage pour suivre le statut de lecture par utilisateur.
- Utilisez des index composites dans Firestore pour les requêtes complexes.
- Utilisez des media queries pour déplacer les éléments fixes sur mobile afin qu'ils ne bloquent pas la barre supérieure.
L'architecture est primordiale. Utilisez Firestore pour les journaux et RTDB pour les mises à jour en direct.