Как сделать страницу доступной автономно
Сохранение Web-страниц для автономной работы
Чтобы сохранить Web-страницу для последующей автономной работы с ней, вы должны в диалоговом окне Добавление в избранное, открывающемся при добавлении страницы в список избранных страниц, установить флажок Сделать доступной автономно. После установки флажка будет доступна кнопка Настройка. Для настройки режима автономной работы нажмите эту кнопку и следуйте указаниям мастера автономного просмотра:
1. Первое окно является информационным и содержит краткое описание работы мастера. Ознакомьтесь с предложенной вашему вниманию информацией и нажмите кнопку Далее.
2. Во втором диалоговом окне выберите режим загрузки только указанной Web-страницы или (в дополнение) Web-страниц, связанных с указанной страницей. При выборе второго режима необходимо указать глубину ссылок (рис. 5.6). Здесь приходится идти на компромисс. Если выбрать малую глубину ссылок, вполне вероятно, что при автономном просмотре вы не получите доступ к необходимым страницам. При большой глубине загружаемые страницы будут занимать много места на жестком диске и, самое главное, процесс синхронизации, т. е. обновления на них информации, будет долгим. Установив необходимые параметры, нажмите кнопку Далее для перехода к следующему шагу мастера.
Рис. 5.6. Указание глубины загружаемых ссылок
3. В следующем окне мастера (рис. 5.7) необходимо указать тип синхронизации Web-страницы. Для ручной синхронизации выберите значение Только при выборе команды «Синхронизировать» в меню «Сервис».
Для создания расписания обновления страниц выберите опцию Используя новое расписание. В этом случае после нажатия кнопки Далее открывается окно мастера, в котором задается имя расписания, время синхронизации и количество дней, через которое осуществляется обновление. Заданное вами расписание при последующих выборах расписания будет появляться в раскрывающемся списке, и вы сможете использовать его для установки частоты обновления не только данной, но и других Web-страниц.
Рис. 5.7. Выбор типа синхронизации
4. На последнем шаге мастер запрашивает, нужен ли пароль для доступа Web-узлу, в котором находится выбранная страница (рис. 5.8). При необходимости введите имя пользователя и пароль. Для завершения настрой ки нажмите кнопку Готово.
Рис. 5.8. Определение пароля доступа к Web-узлу
Оффлайн режим Яндекс Браузера
Что такое оффлайн режим Яндекс Браузера и для чего он нужен? В данном материале мы попытаемся ответить на этот вопрос. Но уточним, что такой режим есть пока исключительно в мобильной версии веб-обозревателя.
Что это такое
Оффлайн режим – это специальный режим работы браузера, который позволяет загружать страницы при отсутствии Интернет-соединения. Весьма полезная штука в том случае, если у вас ограниченный трафик или вдруг закончились деньги.
Принцип работы у этой опции простой. Если интернет соединение есть, то браузер загружает содержимое страниц и сохраняет их в память. Потом пользователь имеет возможность просмотреть их снова. Но уже без подключения к интернету.
На самом деле, такая штука является уникальной, поскольку практически ни один мобильный веб-обозреватель (имеются в виду массовые) не обладает такой функцией. Это добавляет Яндекс Браузеру еще больше преимуществ в глазах пользователей.
Данная функция появилась в приложении еще в 2015 году, но до сих пор находится в стадии тестирования, поскольку в современных реалиях реализовать такую опцию не так-то просто. Особенно много проблем с различными социальными сетями.
Часто администрация социальных сетей не разрешает скачивать контент, находящийся на странице. Они руководствуются якобы принципами безопасности. Но проблема остается. Использовать оффлайн режим с ВКонтакте, к примеру, невозможно.
Тем не менее, многие пользователи по достоинству оценят новую функцию, если опробуют ее. И это плавно подводит нас к вопросу о том, как включить оффлайн режим в Яндекс Браузере. Об этом мы расскажем в следующей главе.
Включение режима в Яндекс Браузере
Для того, чтобы активировать данную опцию нам нужно будет посетить настройки веб-обозревателя. Если вы относительно недавно пересели на Яндекс Браузер, то у вас могут возникнуть определенные проблемы с интерфейсом.
Он может показаться непривычным. Тем не менее, все элементы и пункты меню в нем расположены грамотно. Однако мы предоставим подробную инструкцию, рассказывающую о том, что и как нужно сделать для активации режима.
Вот и вся настройка. Теперь Яндекс Браузер автоматически будет сохранять копии страниц, и вы сможете просмотреть их без подключения к интернету. Как видите, процесс настройки очень прост. Для отключения режима нужно будет сделать все то же самое, но в обратном порядке.
Четыре способа загружать и читать сайты оффлайн
Если вам нужно скачать сайт или отдельные страницы, рекомендуем несколько проверенных и надежных способов.
1. Загружать отдельные веб-страницы
На ПК
В системах Windows, Mac и Linux просто нажмите Ctrl+S на клавиатуре во время работы в браузере, чтобы появилось окно “Save page”, из которого сохраните страницу в выбранном подкаталоге. Будет сохранен HTML-файл и папка, содержащая всю информацию. Вы можете открыть HTML-файл, чтобы получить сохраненную веб-страницу в вашем браузере без необходимости в интернет-соединении.
На смартфонах
Чтение вебсайта в оффлайне возможно как в мобильном приложении Chrome для Андроида, так и в мобильном приложении Chrome для iOS.
В Chrome для Андроида откройте страницу, которую вы хотите сохранить для просмотра в оффлайн и нажмите на кнопку главного меню в верхнем правом углу. Здесь нажмите значок “Загрузка” и страница будет загружена на устройство. Вы можете открыть ее, чтобы посмотреть веб-страницу в вашем стандартном браузере.
В Chrome для iOS функция “Список для чтения” позволяет сохранять веб-страницы, которые можно прочитать позже. Для этого надо в браузере перейти в меню “Поделиться” и выбрать вариант “Читать позже”. Все сохраненные статьи можно легко получить через пункт меню “Список для чтения” в меню настроек Chrome.
Пользователи iOS могут также использовать функцию “Список для чтения” в Safari, чтобы сохранить содержимое веб-страницы для чтения позже, а также для синхронизации этой страницы на других устройствах.
2. Использование HTTracks (для Windows, Linux и Android)
Httrack.com – популярный инструмент для загрузки всех данных сайта и доступа к нему в оффлайне. Это инструмент с открытым исходным кодом, который можно использовать на платформах Windows, Linux и Android. Он будет загружать весь сайт, переходя от ссылки к ссылке, т. е. он может представить архив в таком виде, как будто вы просматриваете сайт в онлайне.
Хотя HTTracks имеет множество настроек, в нем также есть и простой помощник, который дает возможность новичкам легко скачивать данные веб-сайтов. Вот как им пользоваться:
Установите и запустите HTTracks и нажмите кнопку “Next” (далее), чтобы запустить помощника. Вас попросят дать название проекту, который вы хотите создать. Это название в дальнейшем поможет вам идентифицировать данные, когда вам позже понадобится получить к ним доступ, поэтому выберите его таким, чтобы оно имело смысл.
На следующей странице нажмите кнопку “Add URL” (добавить ссылку) и введите ссылку на сайт, который вы хотите загрузить. Вы можете добавлять несколько сайтов, если нужно загрузить данные более чем одного вебсайта.
Также здесь есть кнопка “Set options” (настройки), где можно найти очень удобные опции для настройки под свои требования. Однако, предварительно надо прочитать руководство по HTTtracks, прежде чем менять что-либо в настройках.
После этого просто нажмите “Next” (далее) и нажмите “Finish” (готово), чтобы начать загружать данные сайта.
Этот процесс может занять много времени, в зависимости от того, насколько большой был ресурс. Может потребоваться даже несколько дней для загрузки массивных сайтов.
К тому же эти данные могут легко занять несколько гигабайт пространства вашего жесткого диска, поэтому перед началом надо обеспечить достаточно свободного места. После загрузки вы можете открыть проект и начать просматривать сайт в вашем стандартном браузере.
Совет: HTTtracks начинает загружать данные, начиная с последних обновлений, и продолжает движение назад. Если вам нужны только последние данные, а не весь сайт, можно остановить процесс загрузки, когда вы будете уверены, что требуемые данные закачаны. Даже если остановить процесс загрузки, все равно можно получить доступ к данным, которые уже были скачаны.
3. Использование SiteSucker (для Mac OS X и iOS)
SiteSucker – отличная альтернатива HTTracks для пользователей Mac OS X и iOS. Он работает схожим образом с HTTracks и скачивает сайты полностью, перепрыгивая со ссылки на ссылку. Вы можете также приостановить загрузку посреди процесса, чтобы просмотреть загруженные веб-страницы и продолжить в любое время.
4. Расширения браузеров для чтения оффлайн
Существует несколько расширения для браузера, с помощью которых можно скачать данные вебсайта и просмотреть его оффлайн.
PageArchiver (для Chrome) позволяет сохранять множество веб-страниц и получать к ним доступ из своего интерфейса. Можно загрузить все веб-страницы, которые открыты в браузере в текущий момент. Просто откройте страницы, которые вам нужны, и загрузите их с помощью PageArchiver.
ScrapBook (для Firefox) позволяет загружать одиночные страницы или сразу весь сайт. Также это расширение упорядочивает загруженный контент в своем интерфейсе, а наличие удобной строки поиска облегчает поиск нужного содержимого.
Mozilla Archive Format (для Firefox). Это расширение, по существу, является улучшенной версией встроенного инструмента для сохранения страниц. Оно гарантирует, что страница будет загружена в точности так, какая она есть, и сжимает файл для уменьшения занимаемого дискового пространства. В дополнение к этому, оно загружает все аудио- и видеофайлы на страницах.
Как заставить ваши веб-приложения работать в автономном режиме
Сила JavaScript и браузерного API
Мир становится все более взаимосвязанным — число людей, имеющих доступ к Интернету, выросло до 4,5 миллиардов.
Но в этих данных не отражено количество людей, у которых медленное или неисправное интернет соединение. Даже в Соединенных Штатах 4,9 миллиона домов не могут получить проводной доступ к интернету скорость которого будет более 3 мегабит в секунду.
Остальной мир — те, кто имеет надежный доступ к Интернету — все еще подвержен потере соединения. Некоторые факторы, которые могут повлиять на качество сетевого подключения, включают в себя:
Статья переведена при поддержке компании EDISON Software, которая выполняет «на отлично» заказы из Южного Китая, а также разрабатывает веб-приложения и сайты.
Недавно у меня была возможность добавить автономность к существующему приложению, используя service workers, cache storage и IndexedDB. Техническая работа, необходимая для того, чтобы приложение работало в автономном режиме, сводилась к четырем отдельным задачам, о которых я расскажу в этом посте.
Service Workers
Приложения, созданные для работы в автономном режиме, не должны сильно зависеть от сети. Концептуально это возможно только в том случае, если в случае сбоя существуют запасные варианты.
При ошибке загрузки веб-приложения, мы должны где-то взять ресурсы для браузера(HTML/CSS/JavaScript). Откуда берутся эти ресурсы, если не из сетевого запроса? Как насчет кеша. Большинство людей согласятся с тем, что лучше предоставлять потенциально устаревший пользовательский интерфейс, чем пустую страницу.
Браузер постоянно делает запросы к данным. Служба кэширования данных в качестве запасного варианта все еще требует, чтобы мы каким-то образом перехватывали запросы браузера и писали правила кэширования. Здесь service workers вступают в игру — думайте о них как о посреднике.
Service worker — это просто файл JavaScript, в котором мы можем подписаться на события и написать свои собственные правила для кэширования и обработки сетевых сбоев.
Давайте начнем.
Обратите внимание: наше демо приложение
На протяжении всего этого поста мы будем добавлять автономные функции в демо приложение. Демо-приложение представляет собой простую страницу взятия/сдачи книг в библиотеке. Прогресс будет представлен в виде серии GIF-файлов, и использования офлайн симуляции Chrome DevTools.
Вот начальное состояние:
Задача 1 — Кэширование статических ресурсов
Статические ресурсы — это ресурсы, которые меняются не часто. HTML, CSS, JavaScript и изображения могут попадать в эту категорию. Браузер пытается загрузить статические ресурсы с помощью запросов, которые могут быть перехвачены service worker’ом.
Начнем с регистрации нашего service worker’a.
Service worker’ы являются web worker’ами под капотом и поэтому должны быть импортированы из отдельного файла JavaScript. Регистрация происходит с помощью метода register после загрузки сайта.
Теперь, когда у нас загружен service worker — давайте закешируем наши статические ресурсы.
Теперь, когда наш кэш заполнен самыми последними запрашиваемыми статическими ресурсами, давайте загружать эти ресурсы из кэша в случае сбоя запроса.
Событие fetch запускается каждый раз, когда браузер делает запрос. Наш новый обработчик события fetch теперь имеет дополнительную логику для возврата кэшированных ответов в случае сбоев сети.
Демо № 1
Наше демо-приложение теперь может обслуживать статические ресурсы в автономном режиме! Но где наши данные?
Задача 2 — Кэширование динамических ресурсов
Одностраничные приложения (SPA) обычно запрашивают данные постепенно после начальной загрузки страницы, и наше демо приложение не является исключением — список книг не загружается сразу. Эти данные обычно поступают из запросов XHR, которые возвращают ответы, которые часто меняются, чтобы предоставить новое состояние приложения — таким образом, они являются динамическими.
Кэширование динамических ресурсов на самом деле очень похоже на кэширование статических ресурсов — главное отличие состоит в том, что нам нужно обновлять кэш чаще. Генерировать полный список всех возможных динамических запросов XHR также довольно сложно, поэтому мы будем их кэшировать по мере их поступления, а не иметь заранее определенный список, как мы делали для статических ресурсов.
Посмотрим на наш обработчик fetch :
Мы можем настроить эту реализацию, добавив немного кода, который кэширует успешные запросы и ответы. Это гарантирует, что мы постоянно добавляем новые запросы в наш кеш и постоянно обновляем кэшированные данные.
Наш Cache Storage в настоящее время имеет несколько записей.
Демо № 2
Наше демо теперь выглядит одинаково при начальной загрузке, независимо от нашего статуса сети!
Отлично. Давайте теперь попробуем использовать наше приложение.
К сожалению — сообщения об ошибках везде. Похоже, все наши взаимодействия с интерфейсом не работают. Я не могу выбрать или сдать книгу! Что нужно исправить?
Задача 3 — Построить оптимистичный пользовательский интерфейс
На данный момент проблема с нашим приложением заключается в том, что наша логика сбора данных все еще сильно зависит от сетевых ответов. Действие check-in или check-out отправляет запрос на сервер и ожидает успешного ответа. Это отлично для согласованности данных, но плохо для нашего автономного опыта.
Чтобы эти взаимодействия работали в автономном режиме, нам нужно сделать наше приложение более оптимистичным. Оптимистичные взаимодействия не требуют ответа от сервера и охотно отображают обновленное представление данных. Обычная оптимистичная операция в большинстве веб-приложений это delete — почему бы не дать пользователю мгновенную обратную связь, если у нас уже есть вся необходимая информация?
Отключение нашего приложения от сети с использованием оптимистичного подхода является относительно простой в реализации.
Ключ — обрабатывать действия пользователя одинаково — независимо от того, успешен ли сетевой запрос или нет. Приведенный выше фрагмент кода взят из redux редюсера нашего приложения, SUCCESS и FAILURE запускается в зависимости от доступности сети. Независимо от того, как выполнен сетевой запрос, мы собираемся обновить наш список книг.
Демо № 3
Взаимодействие с пользователем теперь происходит онлайн (не буквально). Кнопки «check-in» и «check-out» обновляют интерфейс соответствующим образом, хотя по красным сообщениям консоли видно, что сетевые запросы не выполняются.
Хорошо! Есть только одна небольшая проблема с оптимистичным рендерингом в автономном режиме…
Разве мы не теряем наши изменения!?
Задача 4 — Собирать действия пользователя в очередь для синхронизации
Нам нужно отслеживать действия, совершенные пользователем, когда он был в автономном режиме, чтобы мы могли синхронизировать их с нашим сервером, когда пользователь вернется в сеть. В браузере есть несколько механизмов хранения, которые могут выступать в качестве очереди действий, и мы собираемся использовать IndexedDB. IndexedDB предоставляет несколько вещей, которые вы не получите от LocalStorage:
На этом этапе мы можем очистить очередь от всех запросов, которые мы успешно отправили на сервер.
Демо № 4
Финальное демо выглядит немного сложнее. Справа в темном терминальном окне регистрируется вся активность API. Демо предполагает выход в автономный режим, выбор нескольких книг и возврат в онлайн.
Ясно, что запросы сделанные в автономном режиме были поставлены в очередь и отправляются разом, когда пользователь возвращается в онлайн.
Этот подход «воспроизведения» немного наивный — например, нам, вероятно, не нужно делать два запроса, если мы берем и возвращаем одну и ту же книгу. Это также не будет работать, если несколько человек используют одно и то же приложение.