Broadcast Channel 是什麼？
在前端，我們經常會用postMessage來實現頁面間的通訊，但這種方式更像是點對點的通訊。對於一些需要廣播（讓所有頁面知道）的訊息，用postMessage不是非常自然。Broadcast Channel 就是用來彌補這個缺陷的。
顧名思義，Broadcast Channel 會建立一個所有同源頁面都可以共享的（廣播）頻道，因此其中某一個頁面傳送的訊息可以被其他頁面監聽到。
下面就來速覽一下它的使用方法。
如何使用？
Broadcast Channel 的 API 非常簡單易用。
建立
首先我們會使用建構函式建立一個例項：
const bc = new BroadcastChannel('alienzhou');
複製程式碼可以接受一個DOMString作為 name，用以標識這個 channel。在其他頁面，可以通過傳入相同的 name 來使用同一個廣播頻道。用 MDN 上的話來解釋就是：
There is one single channel with this name for all browsing contexts with the same origin.
該 name 值可以通過例項的.name屬性獲得
console.log(bc.name);
// alienzhou
複製程式碼監聽訊息
Broadcast Channel 建立完成後，就可以在頁面監聽廣播的訊息：
bc.onmessage = function(e) {
console.log('receive:', e.data);
};
複製程式碼對於錯誤也可以繫結監聽：
bc.onmessageerror = function(e) {
console.warn('error:', e);
};
複製程式碼除了為
.onmessage賦值這種方式，也可以使用addEventListener來新增'message'監聽。
關閉
可以看到，上述短短几行程式碼就可以實現多個頁面間的廣播通訊，非常方便。而有時我們希望取消當前頁面的廣播監聽：
- 一種方式是取消或者修改相應的
'message'事件監聽 - 另一種簡單的方式就是使用 Broadcast Channel 例項為我們提供的
close方法。
bc.close();
複製程式碼兩者是有區別的：
取消'message'監聽只是讓頁面不對廣播訊息進行響應，Broadcast Channel 仍然存在；而呼叫close方法這會切斷與 Broadcast Channel 的連線，瀏覽器才能夠嘗試回收該物件，因為此時瀏覽器才會知道使用者已經不需要使用廣播頻道了。
在關閉後呼叫postMessage會出現如下報錯
如果之後又再需要廣播，則可以重新建立一個相同 name 的 Broadcast Channel。
Demo 效果
下面是 Broadcast Channel Demo 的演示效果：
相容性如何？
Broadcast Channel 是一個非常好用的多頁面訊息同步 API，然而相容性卻不是很樂觀。
好在我們還有些其他方案可以作為補充（或者作為polyfill），其他的前端跨頁面通訊可以參考我的另一篇文章《前端跨頁面通訊的方法》。