Any way to identify browser tab in JavaScript?

Here's a way to have the tabId available after the page was loaded - having the same tabId even after refresh.

This also solves the issue of duplicate tabs, as the tabId is cleared from the sessionStorage.

window.addEventListener("beforeunload", function (e)
{
    window.sessionStorage.tabId = window.tabId;

    return null;
});

window.addEventListener("load", function (e)
{
    if (window.sessionStorage.tabId)
    {
        window.tabId = window.sessionStorage.tabId;
        window.sessionStorage.removeItem("tabId");
    }
    else
    {
        window.tabId = Math.floor(Math.random() * 1000000);
    }

    return null;
});

Access the tabId using window.tabId.

The beforeunload event is needed in order to persist the tabId to have the same id available after refresh.

The load event is needed to:

1. Generate the initial tabId.
2. Load the same tabId after refresh - if exists.

* I don't really know why I should do return null or return at all. Just read that not returning may cause the function to not work :(

Since I don't have find no simple Javascript function as windows.currentTabIndex, I have written some lines of Javascript to fix an ID on each browser tabs when they are loaded.

function defineTabID()
    {
    var iPageTabID = sessionStorage.getItem("tabID");
      // if it is the first time that this page is loaded
    if (iPageTabID == null)
        {
        var iLocalTabID = localStorage.getItem("tabID");
          // if tabID is not yet defined in localStorage it is initialized to 1
          // else tabId counter is increment by 1
        var iPageTabID = (iLocalTabID == null) ? 1 : Number(iLocalTabID) + 1;
          // new computed value are saved in localStorage and in sessionStorage
        localStorage.setItem("tabID",iPageTabID);
        sessionStorage.setItem("tabID",iPageTabID);
        }
    }

This code save last tab's index in localStorage to update current value for new tabs and in sessionStorage to fix page's id !

I must call defineTabId() function in each pages of my application. Since I develop using a JSF templates, this is only defined in only one place :-)

For anyone on here using React, I made a sneaky little hook:

import {useEffect, useMemo} from 'react'
import uniqid from 'uniqid'

export const TAB_ID_KEY = 'tabId'

export default () => {
  const id = useMemo(uniqid, [])

  useEffect(() => {
    if (typeof Storage !== 'undefined') {
      sessionStorage.setItem(TAB_ID_KEY, id)
    }
  }, [id])

  return id
}

Put this on your base App/Page component, or somewhere that you know will always be mounted.

It'll run the effect after mounting and set a unique id for the current tab in session storage, which is storage specific to the tab.

Duplicating the tab will get you a new id for the new tab, since the component will mount again and the effect will run, overwriting the previous tab's id

You can get the tab ID (or clientId) in "fetch" event handler of your service worker. If you need to send that clientId to your page, just use client.postMessage().

In your service worker:

self.addEventListener("fetch", function(event) {
 event.waitUntil(async function() {

  if (!event.clientId) return;

  const client = await clients.get(event.clientId);

  if (!client) return;

  client.postMessage({
   clientId: event.clientId,
  });

 }());
});

In your page script:

navigator.serviceWorker.addEventListener('message', event => {
 console.log(event.data.clientId);
});

Sources: Client.postMessage()

At least for chrome, there's an official answer since 2013: chrome.tabs API.