Познакомьтесь с различными способами взаимодействия между вкладками браузера в реальном времени.
С годами возможности веб-браузера постоянно увеличивались из-за требований, исходящих от веб-приложений. В результате мы можем найти несколько способов достижения аналогичной функциональности. Одна из таких функций, на которую мы редко обращаем внимание, - это возможность общаться через вкладки браузера. Давайте рассмотрим несколько сценариев, в которых вам это нужно.
- Изменение темы (например, темной или светлой темы) приложения распространяется на уже открытые вкладки браузера.
- Получите последний токен для аутентификации и поделитесь им во вкладках браузера.
- Синхронизируйте состояние приложения на вкладках браузера.
На момент написания этой статьи мы могли рассмотреть несколько подходов к взаимодействию через браузеры. Однако у каждого метода есть свои сильные и слабые стороны. Поэтому я подробно расскажу о них, чтобы вы могли найти лучший, подходящий для вашего варианта использования.
1. События локального хранилища
Возможно, вы уже использовали LocalStorage, который доступен через вкладки в одном и том же приложении. Но знаете ли вы, что он также поддерживает мероприятия? Вы можете использовать эту функцию для связи между вкладками браузера, где другие вкладки будут получать событие после обновления хранилища.
Например, скажем, на одной вкладке мы выполняем следующий код JavaScript.
window.localStorage.setItem("loggedIn", "true");
Другие вкладки, которые прослушивают событие, получат его, как показано ниже.
window.addEventListener('storage', (event) => {
if (event.storageArea != localStorage) return;
if (event.key === 'loggedIn') {
// Do something with event.newValue
}
});
Однако у него есть несколько ограничений.
- Это событие не запускается для вкладки, которая выполняет действие набора хранения.
- Для больших объемов данных этот подход имеет неблагоприятные последствия, поскольку LocalStorage является синхронным. И, следовательно, может заблокировать основной поток пользовательского интерфейса.
Дополнительную информацию можно найти в документации MDN для событий хранения.
2. API широковещательного канала
API широковещательного канала позволяет взаимодействовать между вкладками, окнами, фреймами, фреймами и веб-рабочими. One Tab может создавать и публиковать каналы следующим образом.
const channel = new BroadcastChannel('app-data');
channel.postMessage(data);
А другие вкладки могут прослушивать канал следующим образом.
const channel = new BroadcastChannel('app-data');
channel.addEventListener ('message', (event) => {
console.log(event.data);
});
Таким образом, контексты браузера (Windows, вкладки, Frames или Iframes) могут взаимодействовать. Несмотря на то, что это удобный способ связи между вкладками браузера, Safari и IE не поддерживают его. Более подробную информацию можно найти в документации MDN для BroadcastChannel.
Совет: Делитесь своими повторно используемыми компонентами между проектами с помощью Bit (Github). Bit упрощает совместное использование, документирование и организацию независимых компонентов любого проекта .
Используйте его для максимального повторного использования кода, совместной работы над независимыми компонентами и создания масштабируемых приложений.
Bit поддерживает Node, TypeScript, React, Vue, Angular и другие.
3. Сообщение сервисного работника
Вы можете задаться вопросом, как Service Workers попадают в эту картину. По сути, Service Workers также поддерживают отправку сообщений, которые мы можем использовать для общения через вкладки браузера.
Используя Service Workers, вы можете отправить сообщение, как показано ниже.
navigator.serviceWorker.controller.postMessage({
broadcast: data
});
И в принимающем Worker на другой вкладке браузера может прослушивать событие.
addEventListener('message', async (event) => {
if ('boadcast' in event.data ) {
const allClients = await clients.matchAll();
for (const client of allClients) {
client.postMessage(event.broadcast);
}
}
});
Этот метод дает больше контроля и является надежным способом передачи сообщений. Но для реализации Service Workers требуются некоторые дополнительные знания об API Service Worker и немного больше работы. Итак, в том случае, если другие методы не работают, было бы лучше изучить этот. Вы можете найти более подробную информацию в документации MDN для Service Worker API и полный пример по ссылке this.
4. Сообщение в окне
Одним из традиционных способов взаимодействия между вкладками браузера, всплывающими окнами и окнами iframe является Window.postMessage() метод. Вы можете отправить сообщение следующим образом.
targetWindow.postMessage(message, targetOrigin)
И целевое окно может прослушивать события, как показано ниже.
window.addEventListener("message", (event) => {
if (event.origin !== "http://localhost:8080")
return;
// Do something
}, false);Одним из преимуществ этого метода перед другими является возможность поддержки связи между разными источниками. Но одним из ограничений является то, что вам нужно иметь ссылку на другую вкладку браузера. Таким образом, этот подход только для вкладок браузера, открытых через window.open () или document.open (). Более подробную информацию можно найти в документации MDN.
Заключение
Я надеюсь, что статья будет информативной, и вы нашли несколько техник, которые могут быть полезны для ваших веб-приложений. Каждый метод уникален и имеет определенные варианты использования.
В дополнение к обсуждаемым методам мы также можем использовать веб-сокеты и события, отправленные сервером, для связи между вкладками браузера и даже между устройствами в реальном времени. Однако для их использования вам понадобится веб-сервер. Те, которые перечислены в статье, не зависят от веб-сервера, поэтому они будут быстрыми и способны обрабатывать обмен данными в браузере.
Спасибо, что прочитали. И, пожалуйста, поделитесь, если вы обнаружите какие-либо другие механизмы, и не забывайте комментировать, если у вас есть какие-либо вопросы или сомнения.
Удачного кодирования !!! ❤️
