Identifier les onglets d’un navigateur

Pour les besoins d’un projet, j’ai eu à identifier les onglets d’un navigateur ouverts sur un même site en leur attribuant un ID. Grâce à cette identification j’ai pu faire du multiplexing en utilisant le socket créé entre le 1er onglet et le serveur pour communiquer avec les autres onglets (et éviter l’ouverture d’un socket par onglet). Voyons comment l’affectation d’ID se déroule :

let checkTabId = function() {
if(!sessionStorage.id) sessionStorage.id = token()
else if(performance && performance.navigation && performance.navigation.type !== 1) sessionStorage.id = token()
}

On appelle la fonction checkTabId lors de l’event window.onload, celle-ci va alors vérifier si une clé id existe dans le sessionStorage. Le sessionStorage a la particularité de stocker des données le temps d’une session (comme son nom l’indique), là où ça devient intéressant, c’est que l’ouverture d’un nouvel onglet ou fenêtre équivaut à une nouvelle session. Ainsi, si j’ouvre un 1er onglet sur example.com, puis un second sur ce même domaine, les IDs initialisés par checkTabId seront différents. Attention cependant, si un nouvel onglet émane d’une session en cours (par exemple clic droit sur un lien > ouverture dans un autre onglet/fenêtre), le comportement de la plupart des navigateurs sera de partager le sessionStorage. Pour éviter du coup de se retrouver avec le même ID, il suffit de faire appel à l’objet window.performance qui possède une propriété “navigation” indiquant si le chargement de la page résulte d’un rafraîchissement ou autre, permettant ainsi de générer un nouvel ID dans le cas opportun. Dernière précision, cette astuce est prévue dans le cas d’une web app utilisant l’HTML5 history API pour la navigation.