cross-site-tab-change-detection

Demo for cross site tab change detection

Result

You can distinguish tab switching on the same site when a script is injected on all the tabs of the site
You cannot distinguish whether the tab became activated or switched from another site

$ git clone git@github.com:yujiosaka/cross-site-tab-change-detection.git
$ npm install
$ npm run build
$ npm start

	Broadcast Channel	Shared Worker	LocalStorage	WebSocket (SocketIO)
Code simplicity	○	△	○	×
Server load	○	○	○	△
Client load	○	○	△ ¹	○
Responsiveness	△ ²	○	○	× ³
Cross origin support	×	×	×	○
Chrome	54	4	4	10.13
Edge	<=79	79	12	○
Firefox	38	29	3.5	10.11
Internet Explorer	×	×	8	7
Opera	41	10.6	10.5	○
Safari	×	×	4	10.13

Choose Broadcast Channel only when code simplicity is your primary concern
Choose Shared Worker when
1. You don't need to support Internet Explorer
2. You don't need to support cross origins
3. You don't want to place loads on both client and server side
Choose LocalStorage when
1. You need to support Internet Explorer
2. You don't need to support cross origins
3. You don't want to place loads on server side
Choose WebSocket when
1. You need to support Internet Explorer
2. You need to support cross origins
3. You don't want to place loads on client side

LocalStorage writes data to the permanent storage of the browser for detecting tab switches ↩
Broadcast Channel has a short delay for receiving a message from antoher tab ↩
WebSocket has a medium to long delay depending on the network bandwidth for receiving a message from another tab ↩