Broadcast Object to Multiple Browser TABS using Javascript

Introduction

This area is related to switching context between browsers by opening multiple tabs and maintaining the same last behavior in any Tabs using Javascript.

So what are we achieving here (Problem statement)?

Well, consider a scenario.

Many times, Users/Clients open duplicates of the same browser UI window screen in multiple TABS, and for each tab, we have a big registration form with 50+ fields to be updated/saved,

And we want the latest value to be available in all tabs.

• without REFRESHING Or
• without Webstorage (Session/local) variable Or
• without manually calling any backend API.

Assuming we have 50+ form fields to send complete complex object updated is tricky here.

But one browser mechanism does this for us without extra code.

What we got (Solution statement)?

So here we will try to keep each TAB getting updated form values as they try to open another TAB or they try to change it somewhere middle of the TAB, and we will notify all TABS that something is updated.

So kindly update in this way. We always get the latest value at whichever TAB we are.

The simple answer is the BROADCASTCHANNEL API mechanism,

This mechanism is in-built browser behavior done using a few codes, mostly understandable using Javascript. We cannot say it is specific to any javascript/Angular Language specific,

Steps

Open the attached file in multiple TABS and try to update any TAB with newer values; it will auto-reflect in all TABS. Using below ways

1. We create a BroadcastChannel object.
2. Send the message or call the postMessage() method on the created BroadcastChannel object.
3. We use the onmessage event handler to get the posted dispatch object in the above 2 lines.
4. We can showcase this below with a screenshot

Code Snippet

All tabs are notified with a blue dot at the top corner (try to update form values in any TAB). It will automatically notify all opened TAB of the same context.

This is useful when your client is stubborn, and don't care what he is doing, and wants the technical team to take care of everything. LOL

This is a LIVE Client scenario that I come across in one of the projects many do not use and don't know this feature exists at the browser capability level.

Happy Coding..!! Share your view with the LIVE demo attached below.