BroadcastChannel
Простой pub/sub между вкладками/iframe'ами одного origin'а.
Что это
Именованный канал. Любая вкладка подписавшаяся на одно и то же имя получает все сообщения от других вкладок (но не от себя). Идеален для синхронизации UI-состояния: «в одной вкладке вошли — все другие должны обновить header».
Базовое использование
// Во всех вкладках
const channel = new BroadcastChannel('app-state');
channel.addEventListener('message', (e) => {
if (e.data.type === 'logout') {
location.reload;
}
});
// В одной из вкладок
channel.postMessage({ type: 'logout' });
// Закрыть
channel.close();
Use cases
- Синхронизация авторизации (вышел в одной — все обновились)
- Live-обновление: вкладка A добавила запись → вкладка B перерисовала список
- Координация — какая вкладка «лидер»
Поддержка
- Все современные браузеры (Chrome 54+, Firefox 38+, Safari 15.4+)
- Доступно в Window, Worker, но НЕ в Service Worker
Подводные камни
- Не работает между разными origin'ами
- Не работает в Service Worker (автор: для PWA-архитектуры нужен лидер-вкладка с каналом, которая проксирует SW)
- Не персистентный: вкладка получит только сообщения отправленные после её подписки
- Структурированный клон — функции/DOM-узлы не передаются
- Закрытая (не активная) вкладка может пропустить сообщения если её event loop спит
Альтернативы
| Когда | |
|---|---|
| BroadcastChannel | Pub/sub между вкладками |
localStorage + storage event |
Старая школа, работает везде |
Service Worker postMessage |
Кросс-вкладочно через ядро SW |
| SharedWorker | Общий воркер + MessagePort |
Используется в bootcamp
- Любая задача с многовкладочным состоянием: синхронизация авторизации, прогресса прослушивания между вкладками
Ссылки
🎓 Источники
- ⚡ Service Worker для PWA приложений · AsForJS · 2026-01-26
- BroadcastChannel НЕ работает внутри SW — нужна одна вкладка-лидер, которая держит канал и проксирует другим.