Chrome 54 is rolling out today. Among the other features, it introduces the BroadcastChannel API - an easier way to send messages between open windows, tabs or iframes on the same origin.
BroadcastChannel API isn’t actually new, since it was already supported on Firefox 38+, but it definitely amplifies the number of people accessing it, thanks to the wide adoption of Chrome.
How it works
A BroadcastChannel is, well, a channel where you can broadcast and listen to messages, sent and received on same origin contexts. A channel is identified by a unique name and you can instance it with:
Once created, you can send messages via
postMessage() or listen to the
message events on the channel itself. Messages sent from a context are not dispatched to the context itself, so you will not receive your own messages, but you will receive messages other contexts send on the same channel (identified by the unique name -
bus in the example).
To leave a channel, you can
close() it. This will disconnect the link and release the resources allocated by the BroadcastChannel.
BroadcastChannel and the Spreaker Embedded Player
We currently use the BroadcastChannel API in the Spreaker Embedded Player, to ensure that there aren’t two players playing audio at the same time (either they’re in the same page or different pages).
The following example shows how it works (requires Chrome 54+, Firefox 38+ or Opera 41+). Try to click play on the first player, and then play on the second one: once you play the second one, the first one will pause, giving you a much better experience than getting two audios playing at the same time.
BroadcastChannel existence is not enough to ensure the feature is available. When your app runs in a sandboxed iframe,
new BroadcastChannel() will throw an exception whenever you try to instance it.
- BroadcastChannel API
- BroadcastChannel API: A Message Bus for the Web
- Can I use BroadcastChannel API?
You may also be interested in ...
- Chrome changes "HTTPS with mixed content" icon and add Security tab to DevTools
- Who are we developing for?
- New Chrome security policy: powerful features will be removed on insecure origins
- Chrome Android 44+ introduces a new "related apps" banner