Cross-window/tab in-browser notifications with JavaScript

Question

I am working with a website having a chat functionality (think Facebook chat).

I'd like to play a notification tone when a new message arrives. However, the user may have multiple tabs opened and the message arrives to the multiple tabs, as the chat session is multiplexed across different browser tabs/windows.

How to determine

• If a browser has many tabs (windows) open for the same website

• When a new message arrives which of the tab(s) should play a sound effect

I am aware of the Notifications API, but I'd like to solve this problem in backwards-compatible manner. Also if there are any related JavaScript libraries I would like to know about them.

Answer 1

You can use localStorage for such purposes. Data in localStorage is shared between all windows (tabs or iframes) with the same origin. It also can notify your application about changes in localStorage.

See IWC library. I think it will help with your tasks.