❔ Как подружить вкладки и окна с помощью Broadcast Channel API
Иногда возникает необходимость создать канал связи между вкладками, окнами или iframe в рамках одного приложения. Используя данное API, можно закрыть несколько полезных пунктов, как минимум:
✔️ Улучшение UX.
✔️ Повышение безопасности (в некоторых случаях).
✔️ Уменьшение вероятности возникновения багов.
Рассмотрим на примере.
Представим, что мы в интернет-магазине добавили несколько товаров в корзину и решили следующий товар открыть в новой вкладке, чтобы почитать о нем более подробно. Но в новой вкладке у нас пустая корзина (добавление/удаление товаров не связано с бэкендом). Как раз для такой ситуации, как синхронизация корзины между вкладками, нам и поможет Broadcast Channel API.
1️⃣ Добавление товара в корзину. Создадим новый канал и будем отправлять в него сообщение при каждом добавлении товара в корзину:
const cartChannel = new BroadcastChannel('cart-sync');
function addToCart(item) {
// Логика добавления товара в корзину
const cart = getCartFromLocalStorage();
cart.push(item);
saveCartToLocalStorage(cart);
// Отправка сообщения другим вкладкам
cartChannel.postMessage({ type: 'CART_UPDATED', cart });
}
2️⃣ Обработка изменений в других вкладках. Для корректной работы в других вкладках мы подписываемся на сообщения канала cart-sync и следим за каждым новым сообщением:
cartChannel.addEventListener('message', (event) => {
if (event.data.type === 'CART_UPDATED') {
// Обновление корзины в текущей вкладке
updateCartUI(event.data.cart);
}
});
function updateCartUI(cart) {
// Логика для отображения актуального состояния корзины
console.log('Корзина обновлена:', cart);
}
🙂 Вот и все. Теперь у нас есть корзина, которая живет в своем канале и на которую можно подписываться для обновления в контексте браузера.
❗️ Не забываем также учитывать ограничение — это работает только на одном same origin.
Какие есть альтернативы?
Вижу только 2 варианта — сокеты или long-polling. Если есть какие-нибудь еще, в разрезе данной задачи — напиши в комментарии, пожалуйста, будет интересно обсудить.
#dev #javascript
1 минута
19 августа 2024