Как синхронизировать любые закладки браузера с iPad или iPhone
Apple упрощает синхронизацию закладок между браузером Safari на Mac и браузером Safari на iOS, но вам не нужно использовать Safari или Mac для синхронизации закладок вперед и назад.
Вы можете сделать это в любом браузере. Независимо от того, используете ли вы Chrome, Firefox или даже Internet Explorer, есть способ синхронизировать закладки браузера, чтобы вы могли получить доступ к тем же закладкам на iPad.
Safari на Mac
Служба Apple iCloud — это официально поддерживаемый способ синхронизации данных с вашим iPad или iPhone. Он включен в Mac, но Apple также предлагает аналогичные функции синхронизации закладок iCloud для Windows.
На Mac это должно быть включено по умолчанию. Чтобы проверить, включен ли он, вы можете запустить панель «Системные настройки» на Mac, открыть панель настроек iCloud и убедиться, что установлен флажок «Safari».
Если вы используете Safari в Windows — ну, этого не должно быть. яблоко больше не обновляет Safari для Windows . iCloud позволяет синхронизировать закладки между другими браузерами в системе Windows и Safari на устройстве iOS, поэтому в Safari нет необходимости.
Internet Explorer, Firefox или Chrome через iCloud
Для начала, скачать приложение Apple iCloud Control Panel для Windows и установите его. Запустите панель управления iCloud и войдите в систему с той же учетной записью iCloud (Apple ID), которую вы используете на своем iPad или iPhone.
Вы сможете включить синхронизацию закладок с Internet Explorer, Firefox или Chrome. Нажмите кнопку «Параметры», чтобы выбрать браузер, с которым вы хотите синхронизировать закладки. (Обратите внимание, что закладки в Internet Explorer называются «избранными».)
Вы сможете получить доступ к синхронизированным закладкам в браузере Safari на своем iPad или iPhone, и они будут автоматически синхронизироваться между собой через Интернет.
Google Chrome Sync
Google Chrome также имеет собственную встроенную функцию синхронизации, а Google предоставляет официальное приложение Chrome для iPad и iPhone. Если вы пользователь Chrome, вы можете настроить Chrome Sync в настольной версии Chrome — у вас уже должна быть эта функция включена, если вы вошли в браузер Chrome.
Вы можете проверить, включена ли эта синхронизация Chrome, открыв экран настроек Chrome и проверив, вошли ли вы в систему. Нажмите кнопку Расширенные настройки синхронизации и убедитесь, что синхронизация закладок включена.
После настройки Chrome Sync вы можете установить приложение Chrome из App Store и войти в систему с той же учетной записью Google. Ваши закладки, а также другие данные, такие как открытые вкладки браузера, будут автоматически синхронизированы.
Это может быть лучшим решением, потому что браузер Chrome доступен для очень многих платформ, и вы получаете возможность синхронизировать другие данные браузера, такие как открытые вкладки браузера, между вашими устройствами. К сожалению, браузер Chrome работает медленнее, чем собственный браузер Apple Safari на iPad и iPhone из-за того, что Apple ограничивает сторонние браузеры, поэтому его использование требует компромисса.
Ручная синхронизация закладок в iTunes
iTunes также позволяет синхронизировать закладки между вашим компьютером и iPad или iPhone. Он делает это старомодным способом, инициируя ручную синхронизацию, когда ваше устройство подключено через USB. Чтобы получить доступ к этой опции, подключите свое устройство к компьютеру, выберите устройство в iTunes и щелкните вкладку «Информация».
Это более устаревший способ синхронизации закладок. Эта функция может быть полезна, если вы хотите создать одноразовую копию закладок со своего компьютера, но она далеко не идеальна для регулярной синхронизации. Вам не обязательно использовать эту функцию, так же как вам действительно больше не нужно использовать iTunes . Фактически, этот параметр недоступен, если вы настроили синхронизацию iCloud в iTunes.
После настройки синхронизации закладок с помощью iCloud или Chrome Sync закладки будут синхронизироваться сразу после их сохранения, удаления или редактирования.
Как синхронизировать закладки браузера между разными компьютерами
Любой популярный браузер имеет полезную функцию импорта и синхронизации закладок. Выбрав ее, пользователь может либо импортировать закладки из другого браузера на данном компьютере, либо скопировать закладки из одноименного мобильного браузера. Но если стоит задача перенести закладки с одного компьютера на другой, да еще в браузер другого производителя, смысл встроенной функции синхронизации теряется. Одним из немногочисленных способов не потерять свои закладки при переходе не только на другой браузер, но и на другую операционную систему, является расширение EverSync.
Расширение EverSync может быть установлено в Firefox, Chrome и любой другой браузер на движке Chromium из официальных магазинов расширений. Установка EverSync позволит копировать закладки в персональное “облако”, откуда затем они могут быть скопированы в обратном порядке на любой компьютер. Версия операционной системы не имеет значения.
Установка EverSync расширения происходит стандартным способом:
- для браузера Mozilla Firefox https://addons.mozilla.org/
- для Google Chrome https://chrome.google.com/
- для Opera на основе Chromium https://addons.opera.com/
Как только браузер завершит загрузку файла, на панели приложения появится кнопка с иконкой синхронизации. Нажмите ее, чтобы войти в уже существующую учетную запись EverSync или зарегистрировать новый аккаунт.
Здесь нужно заметить, что если в браузере Chrome страница регистрации представляет собой отдельную вкладку с красочным интерфейсом, то в Firefox интерфейс расширения выполнен в виде окна, отображаемого поверх других вкладок. Обращать внимание на визуальную разницу в оформлении не стоит, поскольку принцип работы с EverSync в Chrome и Firefox одинаков.
Для регистрации аккаунта нужно указать адрес своего электронного ящика, который будет служить в качестве логина, и пароль. Регистрация бесплатна и не требует подтверждения по почте.
Доступ к рабочему интерфейсу расширения открывается нажатием кнопки “Опции”.
Интерфейс EverSync состоит из нескольких вкладок. На первой вкладке можно видеть количество закладок, сохраненных в текущем браузере, и количество закладок, скопированных в “облако”. На вкладке “Закладки” можно включить или отключить автоматическую синхронизацию, скопировать данные в веб-аккаунт EverSync или перенести данные из веб-аккаунта на компьютер. Каждый пункт синхронизации сопровождается подробным описанием, которое появляется при наведении курсора, поэтому запутаться в выборе правильного действия невозможно.
Чтобы скопировать закладки на сервер, нужно выбрать одну из двух опций на вкладке “Закладки” – “Объединить” или “Загрузить”. Для первичной синхронизации логично использовать второй пункт.
Синхронизировать закладки можно и вручную, если кликнуть синюю иконку расширения на панели инструментов и выбрать “Синхронизировать”.
Найти скопированные закладки можно посетив онлайн-аккаунт EverSync. Проще всего сделать это нажатием кнопки “Mой EverHelper”.
Когда закладки скопированы в “облако”, их можно переносить в другой браузер или в другой компьютер. В последнем случае нужно будет установить расширение EverSync. Если расширение уже установлено, останется только авторизоваться в нем, а затем на вкладке “Закладки” воспользоваться кнопкой “Заменить локальную информацию”. Спустя мгновение закладки из интернета окажутся доступными локально, из соответствующей папки в браузере.
Ценность EverSync также в том, что оно исключает риск потери закладок браузера при сбое компьютера. Для этого в расширении предусмотрены сразу две функции. Одна из них отвечает за автоматическое создание бэкапов закладок, другая – за автоматическую синхронизацию закладок каждые полчаса. Достаточно лишь не забыть установить галочки в соответствующих пунктах в настройках расширения.
Способы синхронизации вкладок браузера
Давным-давно в далёкой галактике появилась задача по синхронизации вкладок браузера для веб-плеера, наподобие VK: нужно было организовать обмен данными между вкладками, отслеживать их количество и назначать задачи некоторым из них. Всю реализацию нужно было выполнить на клиенте. Информации собрано много, и набралось на целую статью.
Ниже опишу различные способы решения подобных задач.
Рассмотрим наиболее популярные способы синхронизации вкладок браузера в порядке увеличения сложности.
Local Storage
localStorage – локальное хранилище, свойство объекта window, позволяет получить доступ к локальному Storage объекту. В нем можно хранить данные между сессиями пользователя. Есть аналогичное свойство – sessionStorage, но оно хранит данные только в течение сессии страницы.
Данные в storage добавляются с помощью метода setItem.
localStorage.setItem('key', 'value');Событие storage идеально подходит для синхронизации данных между вкладками, оно генерируется при изменении значения элемента localStorage или sessionStorage.
window.addEventListener('storage', function(event) < console.log(event.key); >);
Событие не работает на вкладке, которая вносит изменения, но срабатывает на остальных вкладках домена в браузере.
Генерация события storage
Браузеры имеют различный уровень объема хранилищ для localStorage и sessionStorage:
- Chrome, FireFox и Opera ~ 5 МБ.
- IE ~ 4,8 МБ.
- iOS Safari, OS X Safari ~ 2,5 МБ.
- Android ~ 5 МБ.
Post Message
postMessage — это метод, который позволяет безопасно отправлять кросс-доменные запросы, то есть общаться друг с другом окнам и iframes с разных доменов.
Он очень удобен для взаимодействия внешних виджетов и сервисов, подключенных через iframe с основной страницы.
Передача сообщения:
const win = window.frames.target; win.postMessage('send message', 'http://javascript.ru');Передаваемые данные могут быть любым объектом, который поддерживает клонирование (строка, объект, массив, Map, Date . ). Но IE поддерживает только строки.
Url указывает, что получать сообщения можно только окнам с данного источника.
Чтобы получать сообщения, окно должно подписаться на событие onmessage.
window.addEventListener('message', function(event) < if (event.origin != 'http://javascript.ru') < return; >console.log(event.data); >);Любое окно может получить доступ к этому методу, для отправки ему сообщения независимо от местоположения документа в окне. Поэтому обязательно нужно проверять origin.
В браузере IE интерфейс postMessage работает только с iframes и не работает между вкладками и окнами.
Broadcast Channel API
Broadcast Channel API обеспечивает простую связь между контекстом просмотра (окна, вкладки). Объект BroadcastChannel создает общий канал, который позволяет получить любое сообщение, отправленное в него. Вкладки, окна, iframes могут подписаться на канал и установить с ним связь.
const bc = new BroadcastChannel('test_channel');Метод postMessage публикует сообщение в канале. Аргументом является тип, который поддерживает клонирование.
bc.postMessage('This is a test message.'); Когда сообщение публикуется, message событие будет отправлено каждому объекту, подключенному к этому каналу.
bc.addEventListener('message', function (e) < console.log(e); >)
Публикация сообщения в канале для разных контекстов.
API довольно простое, его можно рассматривать как простую шину сообщений. Но у способа есть весомый недостаток: нет поддержки Safari и IE.
На первый взгляд можно найти несколько похожих методов передачи данных (например MessageChannel, WebSocket), но каждый из них служит определенной цели — их сравнение.
Web Workers
Это механизм, который позволяет скрипту выполняться в фоновом потоке, который отделен от основного потока веб-приложения. Он реализован с использованием js-файлов, которые включаются в страницу с применением асинхронного HTTP-запроса.
Воркеры отлично подходят для того, чтобы выполнять тяжелые вычислительные операции, не замедляя работу пользовательского интерфейса.
Но с синхронизацией помочь могут только два вида воркеров.
Shared Worker
Это особый вид воркера, к которому можно получить доступ из нескольких контекстов браузера. Напишем общий js-файл для вкладок, например shared-worker.js.
const worker = new SharedWorker('shared-worker.js');Каждая вкладка может связываться с воркером через worker.port. Скрипт воркера также имеет доступ к своим портам. Каждый раз, когда вкладка подключается к воркеру, в сценарии запускается событие connect.
// shared-worker.js const connections = []; onconnect = function(e) < const port = e.ports[0]; connections.push(port); >;Метод postMessage создан для отправки данных вкладки на общий воркер.
worker.port.postMessage('test message');Получить данные воркера можно с помощью события message.
worker.port.onmessage = function (e) < console.log(e.data); >;В SharedWorker API есть событие connect, но нет события disconnect, и поэтому данные не смогут самоочищаться в закрытых вкладках — они будут продолжать считаться открытыми. Это не приведет к ошибкам, но можно считать это недоработкой или фичей API.
Работает только в Chrome и FF.
Service Worker
Это событийно-управляемый воркер, который может контролировать, перехватывать и модифицировать сетевые запросы и кешировать их.
Регистрация воркера:
if ('serviceWorker' in navigator) < navigator.serviceWorker.register('service-worker.js') .then(function() < return navigator.serviceWorker.ready; >) .catch(function(error) < console.error('registration error : ', error); >); >С помощью события message вкладки могут получить данные из js-файла воркера, а функция syncTabState используется для обработки сообщения.
self.addEventListener('message', function(e)< const data = e.data; const tabId = e.source.id self.syncTabState(data, tabId); >);Функция sendTabState создана для отправки сообщений вкладкам.
self.sendTabState = function(client, data)
Подробное использование и множество примеров тут.
У всех веб-воркеров нет доступа к объектам window и document.
Service worker не работает в IE и Opera mini.
Библиотеки синхронизации
Это способ для тех, кто не хочет велосипедить и готов рассмотреть уже имеющиеся решения.
- tabs-router, использует Сookie и Local Storage;
- Hermes, использует SharedWorker;
- Visibility, использует Page Visibility API;
- Duel, использует Local Storage и WebSocket;
- __SE__, использует Worker и localStorage;
Итог
Чтобы подвести окончательные итоги, сравним методы по поддержке браузерами наглядно.
Используйте LocalStorage, BroadcastChannel и PostMessage для простых случаев, когда вам нужно отправить сообщение потенциально нескольким окнам/вкладкам или iframes.
Для управления блокировками совместного состояния и совместных файлов наиболее подходящим решением является Shared Workers и Service Worker.
А для задачи с веб-плеером был выбран LocalStorage, так как есть поддержка IE.
Надеюсь, что статья помогла вам в выборе подходящего способа синхронизации.
Благодарю команду Афиши за помощь и поддержку!
- Messaging Between Tabs Using Service Worker
- Sending data across different browser tabs
- BroadcastChannel API: A Message Bus for the Web
- How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them
- Задача коммуникации между вкладками и выявления активной вкладки
- Библиотека для обмена событиями, данными и задачами между вкладками браузера
- javascript
- синхронизация вкладок
Как синхронизировать закладки из Firefox и Chrome с айфоном
Как известно, закладки в вашем мобильном Safari на айфоне можно синхронизировать с закладками из браузера на вашем компьютере. Однако, синхронизировать их можно только с двумя браузерами: Internet Explorer и Safari на Windows и только Safari на Mac OS X. А как же быть пользователям Firefox и Chrome, спросите вы? Ещё бы, число пользователей этих браузеров растёт с каждым днём, а поддержки их в iTunes почему-то нет. Тем не менее, существует как минимум один способ, с помощью которого можно синхронизировать закладки в вашем Firefox’е или Chrome с закладками на айфоне.
Итак, реализуется всё это с помощью специального сервиса под названием Xmarks. Работает он как на Windows, так и на Mac OS, но мы покажем процесс установки на примере Windows и браузера Firefox.
Xmarks — это сервис, позволяющий синхронизировать все ваши закладки между разными браузерами, установленными на вашем компьютере. Смысл достаточно простой: вы устанавливаете специальный плагин на два браузера (или больше, если хотите) и все закладки на этих браузерах у вас будут синхронизироваться между собой и заодно резервная копия будет доступна в онлайне на сайте Xmarks.
Для начала вам необходимо будет зарегистрироваться на сервисе Xmarks. Это не должно занять много времени. После того как вы создали аккаунт в Xmarks вы можете скачивать и устанавливать необходимые плагины для ваших браузеров. Однако, перед какими-либо манипуляциями сервиса рекомендуется всё же сделать на всякий случай резервную копию ваших закладок, на случай если что-то вдруг пойдёт не так. В Firefox резервную копию можно сделать перейдя в меню Закладки — Управление закладками — Резервное копирование. В итоге у вас будет файл с расширением .json, который будет содержать в себе информацию обо всех ваших закладках.
Теперь можно перейти непосредственно к установке плагинов. На Windows вам придётся установить плагин для Internet Explorer и Firefox (или Chrome, если вы пользуетесь именно им). В итоге, все закладки из вашего основного браузера (Firefox или Chrome) будут копироваться в IE и затем через него уже синхронизироваться с айфоном. Если вы пользуетесь операционной системой Mac OS X вы можете сделать тоже самое, только в данном случае, вместо IE вам необходимо будет установить плагин для Safari.
Плагины для различных браузером можно скачать здесь:
Скачиваете плагин для IE (если вы на Windows) или Safari (если на Mac OS X) и устанавливаете его, установка выглядит практически так же как и установка любой другой программы. В ходе установки вам необходимо будет указать логин и пароль от вашего аккаунта в Xmarks.
После этого скачиваете и устанавливаете расширение для Firefox или Chrome. После того как вы установили дополнение и перезагрузили браузер вам будет предложено защитить все ваши закладки паролем. На возможность синхронизации с айфоном это никак не влияет, так что выбор за вами.
Далее выбираете пункт Merge data on the server with data on this computer (Синхронизировать данные с сервером и компьютером в обоих направлениях).
В следующем разделе отмечаете пункт Start with data on this computer (Начать с данных на этом компьютере).
Теперь, после того, как вы нажмёте кнопку Next начнётся процесс синхронизации. Данные о ваших закладках в Firefox или Chrome будут отправлены на сервер Xmarks. Чтобы те же самые закладки появились и в Internet Explorer необходимо будет нажать правой кнопкой мыши на иконке Xmarks в трее и выбрать пункт Synchronize Now.
Вот и всё. После этого вы просто подключаете ваш iPhone к компьютеру, запускаете iTunes, в появившемся в iTunes’е меню переходите ко вкладке Информация и отмечаете галочкой пункт Синхронизировать закладки.
Готово. Теперь все созраняемые вами закладки в Firefox или Chrome будут появляться и в мобильном Safari на вашем айфоне. Ну не забудьте, что все закладки в мобильном Safari, которые раньше у вас были, будут удалены.