> Как организовать общение между двумя вкладками одного приложения в браузере? (JavaScript)

Короткий ответ

Для общения между вкладками одного приложения в браузере используют BroadcastChannel API, postMessage с window.opener, SharedWorker, localStorage с событием storage, или IndexedDB с polling. BroadcastChannel - самый простой и современный способ для однородных источников. postMessage подходит для кросс-доменного взаимодействия. SharedWorker требует отдельного потока. localStorage срабатывает только на других вкладках, не на той, где произошло изменение.

Подробное объяснение

Основные механизмы межвкладочного взаимодействия:

1. BroadcastChannel API - нативный канал связи между вкладками одного origin. Создаётся экземпляр с именем канала, все вкладки с тем же именем получают сообщения. Простой, надёжный, не требует polling.

2. postMessage + window.opener - работает, если одна вкладка открыта из другой через window.open. Родительская и дочерняя вкладки могут обмениваться сообщениями. Ограничение: не подходит для вкладок, открытых независимо.

3. SharedWorker - отдельный поток, общий для всех вкладок одного origin. Вкладки отправляют сообщения воркеру, который ретранслирует их. Требует отдельного JS-файла, сложнее в отладке.

4. localStorage + storage event - изменение localStorage в одной вкладке вызывает событие storage в других вкладках того же origin. Недостаток: событие не возникает в той же вкладке, где произошло изменение, и данные ограничены строковым форматом.

5. IndexedDB + polling или observer - база данных, доступная всем вкладкам. Можно использовать polling (setInterval) или более эффективные подходы с IDBObjectStore.onversionchange. Сложнее в реализации, но подходит для больших объёмов данных.

Выбор зависит от сценария: BroadcastChannel - для простой синхронизации, postMessage - для родитель-дочерних окон, SharedWorker - для сложной логики с общим состоянием.

На практике

Для типового приложения (например, синхронизация состояния корзины или чата) BroadcastChannel - оптимальный выбор. Он поддерживается всеми современными браузерами, не требует дополнительных файлов и легко интегрируется. Если нужно поддерживать старые браузеры (IE11), используют localStorage как fallback.

При использовании postMessage важно проверять event.origin для безопасности. SharedWorker полезен, когда требуется общий кэш или пул соединений (например, WebSocket). localStorage подходит для простых флагов или строковых данных, но не для частых обновлений из-за синхронной записи.

Пример кода

JAVASCRIPT
// Отправка (вкладка 1)
const channel = new BroadcastChannel('app_channel');
channel.postMessage({ type: 'UPDATE', payload: { count: 5 } });

// Получение (вкладка 2)
const channel = new BroadcastChannel('app_channel');
channel.onmessage = (event) => {
  console.log('Получено:', event.data);
  // event.data: { type: 'UPDATE', payload: { count: 5 } }
};

Как отвечать на собеседовании

Начни с BroadcastChannel как основного решения, затем упомяни альтернативы и их trade-off. Объясни, когда какой метод выбирать: для простой синхронизации - BroadcastChannel, для родитель-дочерних окон - postMessage, для сложного общего состояния - SharedWorker. Упомяни ограничения: BroadcastChannel не работает между разными origin, localStorage синхронный и медленный. Если спросят про безопасность, скажи про проверку origin в postMessage и ограничение BroadcastChannel одним origin.

Что проверяет интервьюер

• Знание современных Web API для межвкладочного взаимодействия.
• Понимание ограничений каждого подхода (origin, синхронность, поддержка браузеров).
• Умение выбирать решение под конкретную задачу.
• Осведомлённость о безопасности (origin check, XSS).
• Практический опыт: знание, что BroadcastChannel не работает в Service Worker, а SharedWorker требует отдельного файла.

Типичные ошибки

• Использование localStorage без учёта, что событие storage не срабатывает в той же вкладке.
• Забывают проверять event.origin в postMessage, что ведёт к XSS-уязвимостям.
• Пытаются использовать BroadcastChannel между разными origin (не работает).
• Считают, что SharedWorker - всегда лучшее решение, не учитывая сложность отладки и поддержки.
• Не закрывают канал (channel.close()) при уходе со страницы, что приводит к утечкам памяти.