Leveraging broadcast channels for tab communication

1. What is a Broadcast Channel

A broadcast channel is a new browser-native API that allows message passing between tabs of the same origin. The purpose of this API is to enable developers to share data across different tabs without relying on LocalStorage or other storage methods.

2. Using Broadcast Channels

2.1 Creating a Broadcast Channel

const communication = new BroadcastChannel('communication_channel');

2.2 Sending Messages

communication.postMessage('Greetings');

2.3 Receiving Messages

communication.onmessage = function (event) {
  console.log(event.data);
}

2.4 Closing the Broadcast Channel

communication.close();

3. Broadcast Channel Compatibility

Supported Browsers: Desktop: Chrome, Firefox, Safari, Edge, Opera, and other major browsers support the broadcast channel API. Mobile: On mobile browsers, Chrome on Android and some other browsers also provide support. Safari on iOS also supports this feature.

Limitations: IE and older browsers: Internet Explorer does not support the broadcast channel API. Older browsers may also have compatibility issues. Cross-origin restrictions: Cross-origin issues may limit the use of the channel. It is necessary to follow the same-origin policy or consider security measures for cross-origin communication.

4. Use Cases for Broadcast Channels

4.1 Communication Between Multiple Tabs

// tab1
const communication = new BroadcastChannel('communication_channel');
communication.postMessage('Greetings');

// tab2
const communication = new BroadcastChannel('communication_channel');
communication.onmessage = function (event) {
  console.log(event.data);
}

4.2 Communication Between Multiple Windows

// window1
const communication = new BroadcastChannel('communication_channel');
communication.postMessage('Greetings');

// window2
const communication = new BroadcastChannel('communication_channel');
communication.onmessage = function (event) {
  console.log(event.data);
}

4.3 Communication Between Multiple Iframes

// iframe1
const communication = new BroadcastChannel('communication_channel');
communication.postMessage('Greetings');

// iframe2
const communication = new BroadcastChannel('communication_channel');
communication.onmessage = function (event) {
  console.log(event.data);
}

4.4 Communication Between Multiple Browsers

// browser1
const communication = new BroadcastChannel('communication_channel');
communication.postMessage('Greetings');

// browser2
const communication = new BroadcastChannel('communication_channel');
communication.onmessage = function (event) {
  console.log(event.data);
}

4.5 Communication Between Multiple Domains

// domain1
const communication = new BroadcastChannel('communication_channel');
communication.postMessage('Greetings');

// domain2
const communication = new BroadcastChannel('communication_channel');
communication.onmessage = function (event) {
  console.log(event.data);
}

5. Considerations for Broadcast Channels

5.1 Closing the Broadcast Channel

Closing the broadcast channel is an important issue because failing to close it can lead to memory leaks. There are two ways to close a broadcast channel: calling the close method or the treminate method.

// close
communication.close();

// terminate
communication.terminate();

5.2 Message Size Limitations

There is a limit to the size of messages in a broadcast channel. The limit varies by browser, but it is generally around 1MB. If the limits exceeded, the message will be discarded.

5.3 Supported Message Types

The broadcast channel supports limited message types, including strings, numbers, booleans, objects, arrays, Blobs, Files, ArrayBuffers, SharedArrayBuffers, ImageData, ArrayBufferViews, DataViews, Maps, Sets, Dates, Regular Expressions, Errors, Promises, URLs, URLSearchParams, USVStrings, ReadableStreams, WritableStreams, TransformStreams, MessagePorts, ImageBitmaps, BigInts, and various typed arrays such as BigInt64Array, BigUint64Array, Float32Array, Float64Array, Int8Array, Int16Array, Int32Array, Uint8Array, Uint16Array, Uint32Array, and Uint8ClampedArray.