Getting to Know the Broadcast Channel API in JavaScript
Users can open the same application in multiple tabs at the same time. It may be necessary to sync data locally between these tabs in some cases.
A typical example is when logging out. Users can log out in one tab and stay logged in in a second tab. Despite being logged out in the backend, another user may still see sensitive data in the other tab.
We can utilize a new API that is currently supported by all major browsers — the Broadcast Channel API.
Using the Broadcast Channel API, we can communicate between browsing contexts of the same origin (windows, tabs, frames, and iframes).
In our application, we can create a BroadcastChannel object passing the channel name:
All tabs other than the current one will receive the event and invoke the logout() logic.
It can also be used to synchronize data between tabs, for example:
Follow me on Medium or Twitter to read more about Angular and JS!
