Arrêtez d'utiliser le hack localStorage pour synchroniser les onglets du navigateur. BroadcastChannel le fait nativement.

Le Problème Avec localStorage En Tant que Canal de Communication

Beaucoup de développeurs sont tombés dans le piège d'utiliser localStorage comme système de messagerie improvisé entre les onglets du navigateur. Le modèle est simple : un onglet écrit une valeur, et les autres onglets écoutent l'événement storage pour réagir. Bien que cela fonctionne en urgence, c'est fondamentalement une solution de contournement. L'événement storage ne se déclenche que dans les autres onglets, jamais dans l'onglet qui a effectué le changement, ce qui mène à des cas limites gênants. De plus, localStorage est synchrone et bloquant, ce qui peut causer des problèmes de performance s'il est utilisé fréquemment. Il manque également toute notion d'accusé de réception ou de gestion des erreurs, ce qui le rend peu fiable pour tout au-delà de la coordination la plus basique.

Présentation de l'API BroadcastChannel

L'API BroadcastChannel offre une solution native et spécialement conçue pour la communication inter-onglets. Elle permet à différents contextes de navigation—onglets, fenêtres, iframes, et même les travailleurs de service—de s'abonner à un canal nommé et d'échanger des messages en temps réel. Contrairement au hack localStorage, les messages sont livrés à tous les abonnés, y compris l'expéditeur, ce qui rend la logique de l'application plus prévisible. L'API est asynchrone et non bloquante, s'intégrant naturellement dans les applications JavaScript modernes basées sur les événements.

Cas d'Utilisation Pratiques

Considérons un scénario courant : un utilisateur se déconnecte dans un onglet. Avec BroadcastChannel, cet onglet peut immédiatement notifier tous les autres, les invitant à se rediriger vers la page de connexion sans nécessiter un rafraîchissement manuel. De même, lorsqu'un utilisateur met à jour son panier d'achats, tous les onglets ouverts peuvent recevoir l'état mis à jour instantanément, garantissant une expérience cohérente. D'autres applications pratiques incluent :

• La synchronisation des brouillons de formulaires entre les onglets afin que les utilisateurs ne perdent pas leur travail.
• La coordination en temps réelle des préférences de mode sombre ou de langue.
• La notification des autres onglets lorsqu'une synchronisation en arrière-plan ou un téléchargement est terminé.
• La gestion des verrous partagés ou des jetons de session entre plusieurs fenêtres.

Démarrage avec BroadcastChannel

L'utilisation de BroadcastChannel est simple. Tout d'abord, créez une instance de canal avec un nom descriptif. Ensuite, attachez un écouteur d'événements pour gérer les messages entrants. Pour envoyer un message, appelez simplement postMessage sur l'objet canal. Lorsqu'un onglet n'a plus besoin d'écouter, appeler close nettoie la connexion et prévient les fuites de mémoire. Étant donné que l'API est basée sur les promesses et s'intègre parfaitement aux frameworks modernes, il est facile de l'encapsuler dans un petit module utilitaire qui peut être réutilisé dans toute l'application.

Lecture complémentaire : https://bestpractic.org/blog/broadcast-channel-cross-tab-messaging