Offline программа – Доступ к интернет-сайтам в оффлайне с помощью программы Offline Explorer

Содержание

Доступ к интернет-сайтам в оффлайне с помощью программы Offline Explorer

Немного интересного современный пользователь сможет выжать из компьютерного устройства без подключения к Интернету. Как получить доступ к интернет-контенту, не будучи подключенным к сети? Например, в дороге, на даче, прочих местах, отдаленных от благ цивилизации. Выход здесь единственный – перед поездкой в отдаленные от благ цивилизации места необходимо позаботиться о разнообразии локально хранящегося контента. С Интернета можно скачать видео, аудио, электронные книги, установить не требующие сетевой активности игры.

А при желании на диск ноутбука или планшета можно перенести любимые интернет-сайты и просматривать их в оффлайн-режиме. Правда, не все сайты можно перенести на жесткий диск компьютера. Так, хранящийся на диске компьютера сайт – это не интерактивная среда, и соцсеть таким образом с собой в командировку не возьмешь. Как и не взять с собой в удаленные места масштабные веб-проекты типа YouTube. Для хранения таковых на ноутбуке или планшете попросту не хватит места. Скачивать с Интернета лучше небольшие информационные сайты и блоги, например, когда-то помещенные в закладки, но которые пока что не удалось просмотреть из-за нехватки времени. Локальное хранение сайта может пригодиться представителям торговых организаций, продающих товары по интернет-каталогу за пределами офиса.

Скачанный с Интернета сайт будет являть собой нечто электронной книги, на страницы которой можно переходить ровно до того уровня глубины, который задан непосредственно в процессе скачивания. Сам же процесс скачивания сайтов осуществляется при помощи специального типа программ. Одной из таковых для системы Windows является Offline Explorer – не только загрузчик сайтов, но еще и среда для их просмотра в оффлайне. Ниже рассмотрим, как организовать доступ к интернет-сайтам в оффлайне с помощью программы Offline Explorer.

1. О программе Offline Explorer

Offline Explorer — это функциональный оффлайн-браузер, предусматривающий скачивание веб-сайтов по протоколам HTTP, FTP, HTTPS, MMS, RTSP и Bittorrent и просмотр этих сайтов в условиях отсутствующего Интернета. Программа способна одновременно обрабатывать до 500 проектов (задач на загрузку сайтов или их отдельного содержимого). Offline Explorer может скачивать как обычные сайты с публичным доступом, так и авторизованные аккаунты на соцплощадках и подобного рода веб-ресурсах. Программа поддерживает загрузку практически любого типа контента веб-сайтов – текста, картинок, видео, аудио, анимации, скриптов и т.п. Загружаемый с сайтов контент фильтруется: в настройках каждого проекта можно отказаться от скачивания как отдельных категорий контента, так и конкретных форматов файлов. Скачанные сайты впоследствии могут быть обновлены либо вручную, либо автоматически по расписанию с помощью встроенного планировщика.

Создатели Offline Explorer приложили максимум усилий, чтобы уберечь пользователей от потери данных: программа предусматривает возможности экспорта-импорта настроек, экспорта-импорта проектов со всем их содержимым, резервного копирования и восстановления проектов, а также восстановления удаленных проектов.

Чтобы новички не потерялись в обилии функционала и настроек Offline Explorer, создатели программы прибегли к одному из самых удачных решений в плане программного интерфейса. Оффлайн-браузер выполнен в стиле интерфейса продуктов Microsoft Office – с ленточным меню, где функции и настройки аккуратно собраны в тематические вкладки-разделы, и с настраиваемой пользователем панелью быстрого доступа.

Offline Explorer – платный продукт. Базовая редакция программы стоит порядка $60, но перед принятием решения о покупке 30 дней можно бесплатно тестировать триал-версию.

2. Общие настройки

Offline Explorer предусматривает возможность внесения общих настроек, распространяющихся на всю работу программы, а также настроек для каждого отдельного проекта. Для внесения общих настроек следуем в меню «Файл» и выбираем, соответственно, «Настройки».

Offline Explorer

В разделе общих настроек можем задать нужные параметры интернет-соединения, настроить поведение программы (обновление, взаимодействие с Windows, уведомления и т.п.), а также внести прочие коррективы. Например, указать отличную от предустановленной папку хранения данных проектов Offline Explorer. По умолчанию программа предусматривает не лучшее место для размещения этой папки – диск С. Слева в разделе настроек «Программа» кликаем «Файлы», далее переходим в основную часть окна, жмем кнопку «Изменить», указываем папку на несистемном диске и применяем изменения.

Настройки

В общих настройках также можем добавить альтернативные браузеры для отображения сайтов в оффлайне. Слева окна настроек кликаем «Инструменты», далее – «Внешние браузеры», а в основной части окна жмем кнопку «Автовыбор». В перечне альтернативных браузеров должен появится Internet Explorer, а также прочие обозреватели, установленные в систему. Применяем изменения.

Инструменты

3. Скачивание сайта

Не считая ленточного меню вверху, окно Offline Explorer поделено на три рабочие зоны: слева размещаются папки и содержащиеся внутри их проекты, правая часть – это, собственно, окно веб-обозревателя, внизу же отображаются параметры загрузки содержимого проектов, диспетчер ресурсов, а также отдельные программные функции. Все эти зоны будут задействованы при скачивании сайтов, их отображении в оффлайне, а также в процессе управления проектами.

Скачивание сайта начинается с создания нового проекта. Создать таковой можно несколькими способами, в частности, путем запуска мастера с использованием готовых шаблонов, заточенных под скачивание с сайтов лишь отдельного контента, или с помощью пошагового мастера нового проекта, включающего возможность ручной настройки необходимых параметров. Воспользуемся последним инструментом, жмем «Новый проект».

Новый проект

Для примера скачаем содержимое аккаунта на Facebook. К сожалению, Offline Explorer не всегда удастся скачать содержимое с защищенных зон сайтов, но с аккаунтом Facebook в тестируемом случае программа справилась успешно. В окне свойств нового проекта кликаем «Адрес», вводим произвольное имя проекта и указываем веб-адрес. При скачивании обычного информационного сайта или блога в качестве веб-адреса можно использовать его доменное имя, т.е. адрес на главной странице. Скачивая же содержимое с защищенных зон веб-ресурсов типа соцсетей, необходимо указывать, соответственно, веб-адрес своего аккаунта.

Адрес

Далее переключаемся на вкладку «Уровень». Здесь необходимо указать максимальную глубину сканирования сайта – уровень страниц, отдаленных от главной числом переходов. Оптимальным показателем является уровень 5, меньшее значение ускорит загрузку сайта, но последний, соответственно, будет скачан не в полном объеме.

Уровень

Если скачивается защищенная данными авторизации часть сайта, как в случае с аккаунтом Facebook, во вкладке «Пароли» вводим логин и пароль.

Пароли

Вкладка ниже «Папка загрузки» позволяет установить для каждого отдельного проекта свою папку хранения данных. В общих настройках мы сменили папку для хранения данных Offline Explorer, а в настройках каждого отдельного проекта можем просто дописать название подпапки. В таком случае файлы каждого проекта будут храниться в своей папке, что упростит доступ к ним в проводнике.

Папка загрузки

В подборке настроек «Фильтры файлов» можно снять галочки с отдельных типов контента или конкретных форматов файлов, чтобы эти данные не загружались. При необходимости корректируем прочие настройки проекта, после чего жмем «Применить».

Фильтры файлов

Проект создан, теперь можно приступать к загрузке сайта.

Загрузка сайта

Offline Explorer – это не только загрузчик веб-контента, его хранитель и менеджер, но, как упоминалось, еще и браузер для доступа к сайтам в оффлайн-режиме. Когда загрузка завершится, при выборе проекта в левой части окна Offline Explorer справа получим отображение сайта, но уже с локальным веб-адресом.

Локальный веб-адрес

Сайты в оффлайне можно просматривать и с помощью других браузеров. Эту возможность мы обеспечили в первом пункте статьи при работе с общими настройками программы.

Сайты в оффлайне

Offline Explorer также предусматривает создание проектов скачивания сайтов из закладок установленных в системе браузеров.

Создание проектов

В этом случае проект позаимствует название и веб-адрес из закладки, а во всем остальном получит настройки по умолчанию. Перед запуском загрузки сайта настройки проекта, созданного из закладки браузера, можно изменить, выбрав в вызванном на проекте контекстном меню пункт «Свойства».

Свойства

Скачать триал-версию Offline Explorer:
https://www.metaproducts.com/mp/offline_explorer.htm

www.white-windows.ru

Лучшие Android-приложения для работы в режиме офлайн

Складывается ощущение, что почти каждое приложение требует подключения к интернету, чтобы быть более функциональным в наши дни. Однако есть ещё места, где трудно найти интернет – это означает, что ваши онлайновые приложения окажутся бесполезными.

Чтобы помочь вам избежать таких неприятных ситуаций, мы сделали подборку лучших офлайн-приложений для Android, чтобы вы могли не терять развлечений, где бы вы ни находились.

Нет интернета? Не беда – вам поможет наш список лучших офлайн-приложений для AndroidНет интернета? Не беда – вам поможет наш список лучших офлайн-приложений для Android

Лучшее приложение для музыки: Spotify

С помощью приложения Spotify вы не только сможете получить доступ к миллионам песен, но и настроить его для синхронизации с вашими плей-листами в фоновом режиме. Это значит, что вся ваша любимая музыка будет доступна в автоматическом режиме, когда вы в офлайн. Кроме того, можно будет легко назначить всю вашу музыку на microSD карту, если вы не желаете, чтобы она занимала пространство внутренней памяти вашего устройства.

Отметим, что премиум-подписка на Spotify обойдётся вам в 9,99 долларов в месяц, но, наш взгляд, Spotify является одним из самых классных сервисов в мире. Нет ничего лучше, чем сохранить несколько альбомов на ваш девайс, когда вы используете Wi-Fi в кафе аэропорта, ожидая ваш рейс самолёта.

Просто нажмите на слайдер «Доступно офлайн» в вашей папке «Песни», и треки будут загружены на ваше устройствоПросто нажмите на слайдер «Доступно офлайн» в вашей папке «Песни», и треки будут загружены на ваше устройство

Лучшее подкаст-приложение: Pocket Casts

Вы можете объединить подкасты с онлайн-интернетом, но вы также можете и загрузить все ваши любимые подкасты для собственного бесконечного удовольствия. Pocket Casts – это одно из лучших подкаст-приложений, позволяющее производить поиск сотен тысяч подкастов по всему интернету и затем загружать на ваше устройство.

[the_ad_placement id=”web-mobile-inline”]

Pocket Casts также позволяет делать загрузки из ваших подписок – то есть, если вы решили прослушать определённые аудиофайлы, то они будут загружаться в фоновом режиме в то время, когда у вас есть доступ к Wi-Fi.

Разработчик этого приложения – ShiftyJelly – явно очень умён: он создал эффективное и интуитивное ПО, которое сделает для вас все, что в его силах.

Pocket Casts может автоматически загружать аудиофайлы для прослушивания офлайнPocket Casts может автоматически загружать аудиофайлы для прослушивания офлайн

Лучшее приложение для путешествий: TripAdvisor Hotels Flights

TripAdvisor можно назвать королём приложений для путешествий. Это приложение предлагает обзоры, фотографии и отзывы от туристов, а также составляет рейтинги всего, что связано с путешествиями на основании различных отзывов людей.

Отметим, что TripAdvisor работает в паре с другим специализированным приложением – City Guides, которое можно загрузить из сторонних источников, и впоследствии эти два приложения функционируют как единое целое, включая в себя офлайн-доступ к обзорам, картам и фотографиям более чем 300 городов.

Если вы путешествуете, то вам стоит воспользоваться услугами TripAdvisor Hotels Flights.

Установите на ваше устройство TripAdvisor, чтобы иметь доступ к офлайн-информации во время путешествийУстановите на ваше устройство TripAdvisor, чтобы иметь доступ к офлайн-информации во время путешествий

Лучшие приложения для документов: Google Drive

Представьте себе – мы не сошли с ума. Несмотря на то, что Google Drive является одним из лидеров среди сервисов облачного хранилища данных в мире, этот сервис также позволяет вам загружать файлы и документы на ваше устройство. Впоследствии вы можете работать с такими файлами офлайн, и они будут синхронизированы с хранилищем, когда у вас будет подключён интернет.

[the_ad_placement id=”web-mobile-inline”]

Для этого вам нужно нажать на иконку i или иконку «Опции» файла в Google Drive, затем нажмите на кнопку рядом с пунктом «Сохранить на устройстве». Вы можете проделать такие действия с любым количеством файлов, и Google Drive позволит вам работать с ними отдельно от хранилища.

Откройте файл, нажмите на иконку в виде 3 точек, затем нажмите на «Загрузить и синхронизировать» для сохранения и офлайн-доступаОткройте файл, нажмите на иконку в виде 3 точек, затем нажмите на «Загрузить и синхронизировать» для сохранения и офлайн-доступа

Лучшие приложения для сохранения файлов про запас: Pocket

Pocket по праву считается одним из лучших приложений для офлайн-чтения в Play Store. С его помощью вы можете загружать статьи, видео и другой онлайн-контент на ваше устройство, а затем работать с ним в офлайн-режиме. Вам достаточно лишь нажать на кнопку «Поделиться» в статье, которую вы хотите сохранить и потом выбрать Pocket, чтобы почитать её позже.

Также добавим, что у приложения Pocket имеется красивый интерфейс, и иметь его под рукой будет означать, что вы не пропустите контент, который вы не закончили читать или смотреть в первый раз.

Pocket подбирает онлайн-статьи для вас, чтобы вы могли читать их в режиме офлайнPocket подбирает онлайн-статьи для вас, чтобы вы могли читать их в режиме офлайн

Лучшие приложения-словари: Offline Dictionaries

Если вы попали в другую страну и не владеете нужным языком, то вам крайне важно наладить общение с местными жителями. Offline Dictionaries — это бесплатное Android-приложение, которое выгодно отличается от других благодаря своей огромной базе данных синонимов и поддержке более чем 50 языков.

[the_ad_placement id=”web-mobile-inline”]

После запуска этого приложения вы загружаете все языки, с которыми планируете иметь дело, и потом обращаетесь к Offline Dictionaries напрямую, и не беспокоясь о наличии интернета.

Скачайте нужные вам словари для работы офлайнСкачайте нужные вам словари для работы офлайн

Лучшие приложения для перевода: Google Translate

Google Translate можно назвать одним из самых простых и эффективных переводчиков на данный момент. Вы можете произнести что-нибудь вслух или набрать текст в Google Translate, и это будет переведено на 90 и более языков.

Отметим, что все ключевые функции доступны и офлайн. Вы можете загрузить множество языков и делать перевод с одного языка на другой, а также сохранять такие переводы и возвратиться к ним позже в случае необходимости.

Перед уходом в отпуск вам следует загрузить необходимые языки на ваше устройствоПеред уходом в отпуск вам следует загрузить необходимые языки на ваше устройство

Лучшие приложения-карты: Google Maps

Пользоваться старой версией Google Maps в режиме офлайн было немного неудобно, но так как это приложение регулярно обновляется, его функциональность теперь выше, чем раньше. Google Maps легко скачать, зайдя во вкладку «Офлайн» в меню настроек. Здесь вы можете скачать полные карты городов, включая отличную систему навигации от Google для пользования в режиме офлайн. Стоит сказать, что любые загруженные карты для работы в офлайн будут автоматически удалены через 30 дней, поэтому вам не стоит беспокоиться о неиспользованных картах, которые зря занимают пространство хранилища.

Откройте «Настройки», выберите пункт «Зоны офлайн» и загрузите нужные карты для использования офлайнОткройте «Настройки», выберите пункт «Зоны офлайн» и загрузите нужные карты для использования офлайн

Какие ещё есть отличные приложения для использования офлайн? Какие, на ваш взгляд, являются самыми лучшими?

doitdroid.com

Как мы запустили offline-версию сайта RG.RU

Как часто, запрашивая страницу, мы видим сообщение «Нет подключения к интернету». Однако, уже давно существует возможность отлавливать события в отсутствие интернета и контролировать содержимое, которое видит пользователь. Алексей Чернышев и Максим Чагин запустили offline-версию сайта Российской Газеты – официального издания Правительства России с 1 млн посетителей в сутки – и поделились своим опытом на РИТ++ 2017. Под катом расшифровка их доклада.

Оffline-версия уже доступна для любого сайта

Давайте представим – у нас сервис доставки пиццы. Клиент заходит, но у него нет интернета. Он ждет 20 секунд и видит все то же самое: «Нет подключения к интернету». Не думаю, что это остановит его от заказа, если у нас действительно вкусная пицца.

Но вы уверены, что для того, чтобы зайти на сайт, выбрать пиццу, наполнить ее ингредиентами, отправить форму заказа, нам действительно нужен интернет? Да нет, конечно! Все это можно сделать и офлайн, а когда появится соединение, отправить заказ уже на сервер для обработки.

Если интернет так и не появился, можно отправить нотификацию: «Ой! Свяжись с менеджером по телефону или останешься голодным!» Вариант, конечно не идеальный, но лучше, чем ничего.

Это может быть абсолютно любой кейс. Если у вас интернет-магазин, можно пользователю сообщить о распродаже. В случае информационного контента, можно дать почитать интересные материалы.

Service Worker – сердце offline-приложений

Вся работа в офлайн строится на использовании Service Worker. У него есть много свойств, но мы поговорим только об основных базовых частях, которые помогут понять, что вообще происходит с офлайном.

Итак, Service Worker – это событийно-управляемый воркер, который получает в себя JavaScript файл, выполняет его, и позволяет:

✓ Контролировать страницы, в контексте которых это Service Worker был вызван;

✓ Перехватывать различные запросы и модифицировать их на подконтрольных страницах;

✓ Кэшировать ресурсы через специальное кэш API.

Также хочется отметить, что он работает в потоке, параллельном от основного, и соответственно, ему не доступен DOM, LocalStorage или объект Window. Но зато он, выполняя какие-то действия, не блокирует основной UI браузера.

Принцип работы Service Worker

Чтобы Service Workerв принципе мог заработать на сайте, и вся магия смогла действовать, его нужно зарегистрировать, потом он должен пройти этап установки и этап активации.

Регистрация Service Worker

На клиенте нужно вызвать код, который передает путь до нашего Service Worker. Еслиэтот файл доступен и его можно выполнить без ошибок, тогда Service Worker считается зарегистрированным, и начинает прослушивать и просматривать те страницы, которые находятся в его области видимости.

Немножко про область видимости

  • Если Service Worker положить в корень сайта, рядом с Favicon, то он будет видеть все страницы, которые находятся внутри сайта.
  • Если его положить в какой-то подкаталог, то он будет действовать только в странице, которая находится внутри этого каталога.
  • Можно программно ограничить его область видимости через свойство scope. В примере мы ограничили его, чтобы он работал только в подкаталоге article.

Установка Service Worker

Первое событие, которое возникает – это событие установки. Обрабатывая это событие, мы кэшируем ресурсы, которые впоследствии будем использовать для отдачи клиенту офлайн-версии, через кэш API в браузер.

Активация Service Worker

После этого срабатывает событие активации. Заметим, если Service Worker только в первый раз регистрируется и активируется на странице, то после этого сразу срабатывает событие активации и можно что-то сделать, обрабатывая это событие.

При обновлении Service Worker’а порядок активации отличается. Если до этого на сайте уже была какая-то его версия, а мы изменили файл, браузер, который примерно через сутки проверяет идентичность, понимает: «Ага, у меня новая версия Service Worker лежит на сайте, давайте-ка я ее обновлю!»

После этого в новом Service Worker’е запускается регистрация и установка. Но, если у пользователя открыты страницы со старым Service Worker’ом, новый Service Worker переходит в режим ожидания. Только после того, как они будут закрыты, срабатывает событие активации, и он может продолжать работать, в этот момент можно прибраться за старым Service Worker’ом и удалить ненужные данные.

Слушаем события

После того, как мы обработали активацию, Service Worker начинает работать в полную силу, а именно ему доступны следующие события:

  • Message позволяет с клиентской стороны сказать Service Worker’у что-либо сделать, т.е. посылать сообщение через Post message.
  • Fetch – одно из самых важных событий в офлайн-методике. Возникает, когда в подконтрольных Service Worker’у страницах запрашивается какой-либо ресурс. Обрабатывая событие Fetch, мы можем отправить нужный ответ на страницу.
  • Push возникает, когда от какого-либо сервиса приходит Push-уведомление в браузер.
  • Sync возникает, когда мы хотим на клиенте в фоне обновить какие-то данные для Service Worker’а.

Подходы к построению offline-приложений

Теперь, когда мы знаем, что такое Service Worker и что с его помощью можно управлять кэшом, выделим основные стратегии построения офлайн-приложения.

1. Статика.

Берем вообще все, что есть на странице – HTML. CSS, JS, Fonts, SVG, IMG и закидываем в кэш. Это самый простой и быстрый способ сделать ваше приложение доступным в офлайн, но у него есть существенный недостаток. Он подходит для редко обновляемого статического контента, если информация меняется чаще, чем пользователь заходит на сайт, то возможно она попросту утратит свою актуальность и станет никому не нужна.

Такой вариант можно применить для кэширования расписания конференции. У нас уже есть докладчики, все собрано и скомпилировано – закинули в кэш, и все счастливы.

2. Offline first, или неубиваемый сервис.

Это способ создания приложения, где подключение к интернету является своего рода усовершенствованием, а не необходимостью. По умолчанию мы считаем, что интернета у нас нет. Вся серверная логика переносится на клиент.

Как только появляется интернет, клиентская часть синхронизируется при необходимости с серверной, а пользователь продолжает работу, как ни в чем не бывало.

Например, у нас есть сервис публикации новостей, редактор может там писать и делать, что угодно, без интернета, а когда интернет появится, все синхронизируется с сервером, и можно будет выводить контент на сайт.

3. SPA

Это развертывание мини-приложения со своей структурой, адресацией, дизайном. Как мы уже говорили, в таком мини-приложении мы перехватываем запрос от пользователя, и в случае, если у него нет интернета, выставляем какой-то контент.

Это может быть все, что угодно – игра, интерактив, опрос. Такой вариант не подходит для сервисов в силу того, что у нас фактически происходит подмена контента, но для информационного, развлекательного ресурса это идеальный вариант.

У себя мы используем именно его расскажем о нем чуть подробнее.

Идея создания offline-версии rg.ru

Итак, на конференции Moscow JS коллеги из Лента.ру рассказали, что ни предлагают поиграть в крестики-нолики, если в процессе чтения приложения у пользователя пропадает интернет. Сама идея нам показалась интересной, но одной игрушки мало. Мы рассудили, что пользователь видит все то же сообщение и это банально.

Другой вариант: пользователь заходит на сайт и, пока у него нет интернета, ему предлагают почитать статьи. Это уже лучше – по крайней мере, есть шанс, что мы завладели вниманием пользователя, и после того, как у него появится интернет, он продолжит читать дальше на основном сайте.

Описание интерфейса

Первое, что приходит в голову, когда пытаешься представить себе офлайн-приложение, это 2 страничный SPA: главная страница со списком новостей, и можно открыть любую для прочтения.

Важный вопрос — как сообщить пользователю, что у него открылась офлайн-версия, чтобы он не подумал, что сайт теперь так выглядит. Мы пробовали много разных вариантов, но остановились на простой максимально заметной плашке сверху, которая сообщает, что это офлайн -версия и тут нет рекламы. В правом верхнем углу есть индикатор красного цвета, на котором написано «Offline», как только интернет появляется, он становится зеленым, сигнализируя о том, что доступна целевая страница.

Фильтруем контент

Надо заметить, что в офлайн попадают не все материалы подряд. Это связано со спецификой информационного контента. Представьте, приложение может быть открыто и через неделю, и через месяц после последнего посещения, а мы в июне-июле покажем пользователю что-то вроде «20 мая в Москве потеплеет до климатической нормы». С другой стороны, советы, как сохранить здоровье после 25, всегда актуальны.

Как работает offline-версия сайта rg.ru

Для того, чтобы это все сработало, необходимо хотя бы раз зайти на сайт. После входа на сайт инициализируется Service Worker, добавив в кэш всю необходимую информацию.

Архитектура offline-приложения

Пользователь заходит на сайт и на клиентской стороне страницы включается регистрация Service Worker’а, мы отдаем пользователю в кэш несколько файлов для офлайн-версии, а после этого удаляем ненужное старое.

Далее начинаем проверять доступность самой страницы через события Fetch. А именно, обрабатывая событие Fetch, мы смотрим, если запрашиваемый ресурс доступен, то мы его просто отдаем. Если же нет, уходим в исключение и отдаем через кэш API нашу офлайн-версию.

Пока Service Worker все проверяет и обрабатывает, мы параллельно выясняем, нужно ли обновить данные для офлайн-версии пользователю.

Принцип работы приложения

Как уже было сказано, офлайн-версия – это SPA приложение, построенное по стандартной MVC архитектуре: есть контроллер, который получает в нашем случае всего 2 адреса, главной страницы или страницы статьи. Мы забираем данные из кэша и нужный нам кусочек шаблона и отдаем пользователю уже готовую HTML.

Кстати, здесь мы не используем никакие библиотеки типа React или Angular. У нас только шаблонизатор Mustache и обычный JavaScript – просто, чтобы все это не перетаскивать пользователю в браузер.

Доступность сети

Теперь нужно решить, как узнать, что интернет появился. События ONONLINE и ONOFFLINE, к сожалению, не подходят, потому что возникают, когда из сетевой карты выдергивается сетевой шнур. И мы пошли в лоб, и это оказалось эффективно.

Через определенный интервал времени внутри приложения отправляется статистика в Google Analytics – если статистика отправилась, мы понимаем, что интернет появился и сообщаем об этом пользователю.

Проблемы…

Когда мы разрабатывали эту версию и запускали ее на продакшн, мы столкнулись с рядом проблем, которыми хотим с вами поделиться, чтобы вы не наступили те же грабли.

Обновление данных

— Кэп, у нас проблема! Нужно обновлять закэшированные данные, чтобы пользователь всегда видел актуальную версию новостей.

— Может, у тебя есть какие-то идеи? Ты же это разрабатываешь!

Первое, что приходит в голову, конечно же, setinterval внутри Service Worker’а – почему бы и нет? Мы провели небольшой эксперимент. Внутри Service Worker’а написали функцию, которая в цикле каждые 10 секунд отправляла простой get запрос на сервер, все данные логировались. После этого заходим на тестовую страницу, чтобы Service Worker инициализировался, закрываем вкладку и ждем, пока Service Worker умрет.

Выяснилось следующее:

  • В Google Chrome на десктопе Service Worker умирает, то есть перестает отправлять запросы, ровно через 1 минуту.
  • FireFox отправляет запросы бесконечно, пока браузер открыт Service Worker продолжает работать.
  • В мобильном Chrome’е Service Worker также работает бесконечно, даже если убрать браузер из приложений, он все равно отправляет запросы.

В принципе, с setinterval можно работать. Но мы не стали его использовать:

  1. Потому, что неизвестно, сколько это жрет батареи.
  2. Неизвестно, что будет в следующей версии, вдруг Google ограничит отправку запросов одной минутой, как на десктопе.

Поэтому мы, как и с проверкой на доступность сети, решили пойти обходным путем. Если пользователь заходит на страницу, когда есть интернет:

  • Ему записывается метка времени в Local Storage.
  • При перезагрузке страницы или ее повторном посещении опять снимается метка времени и сравнивается с той, которая была записана в Local Storage.

Таким образом вычисляется, сколько времени прошло с последнего посещения нашего сайта, и если больше 15 минут, в Service Worker отправляется запрос: «Дружище, пора бы удалить из кэша старые данные и записать туда новые!»

В документации написано, что разрабатывается Background Synchronization, то есть в будущем можно будет в фоне через метод PeriodicSync’а обновлять данные для Service Worker’а. Но пока мы используем проверенные метки времени.

Задержки при получении данных

Когда мы тестировали офлайн-приложение в метро, возникла ситуация, когда приложение инициализировалось, но данные не поступили. Что могло произойти? С непонятным состоянием интернета в метро, Service Worker не понимал, есть ли интернет или нет, и образовывалась задержка.

Решилось очень просто. Мы посылаем запрос не через Fetch, а через PostMessage из нашего SPA приложения просим Service Worker’а: «А ну-ка, дружище, отдай нам данные, которые у тебя есть в кэше!»

Два Service Worker в одном scope

У нас уже был один Service Worker с сервисом push-уведомлений, а теперь мы разработали второй. Просто задать им разный scope не подходит, потому что и push-уведомления, и офлайн-версия должны работать на всем сайте.

Задать корневой Scope тоже нельзя, потому что Service Worker, установленный позднее, заместит собой более раннюю версию. Сделать один файл Service Worker и в него заимпортить скрипты с разными сервисами тоже не получилось из-за похожей обработки событий.

Поэтому пришлось банально все переписать заново. Точнее, логика осталась, но мы сделали одно большое PWA-приложение для работы в Service Worker’е и уже в него подключили отдельные сервисы.

На данный момент это только Push-уведомления и офлайн–версия, но возможно в будущем нам пригодится такой модульный подход для чего-то еще.

Банальный совет – лучше заранее сделать полностью модульную структуру в Service Worker’е, чтобы потом не пришлось переписывать.

Проксирование трафика через Service Worker

Настал тот момент, когда мы вроде бы уже все сделали, все отлажено и мы запускаем Service Worker в нашу офлайн-версию на продакшн.

Но не все пошло гладко, на всех страницах сайта офлайн-версия работала. Но были страницы с видеоплеером, при включении которого видео отдавалось с огромной задержкой в минуты, т.к. оно тоже проходило через Service Worker.

Мы поняли, что через Service Worker не нужно пропускать что-либо, кроме самого документа страницы, и добавили соответствующий фильтр. Правда, все равно не сработало, потому что видео отдавалось тоже внутри Service Worker с таким заголовком. Пришлось дополнительно исключать видео из всех запросов.

Аналитика

Есть еще одна проблема – это аналитика. Интернета у нас нет, запросы не отправляются, а знать, что там происходит нам очень хочется.

Самый простой вариант, отправлять данные в GA, если в процессе чтения приложения появляется интернет. Но что делать с пользователями, которые закрыли приложение до появления сети. Давайте хранить аналитику на клиенте, и отправлять ее позже. Решили, что лучшим вариантом для хранения будет Index DB.

Это стандарт хранения больших объемов структурированной информации на клиенте, который

  • работает асинхронно;
  • поддерживает транзакции;
  • умеет работать с индексами;
  • работает непосредственно прямо из Service Worker’а.

В нашем небольшом приложении нужны только первый и последний пункты.

Теперь схема выглядит так:

  • Пользователь ходит по странице;
  • Все данные pageview отправляются в базу данных;
    • Если данные отправляются, считаем, что интернет есть, база данных очищается;
    • Если интернета нет, запрос не отправляется, ждем следующего цикла.

Прикрутив эту штуку, мы нашли примерно 10% пропавшей аудитории.

Что мы имеем на данный момент?

Когда мы только запускались, данные были, скажем, так себе – 2 тысячи пользователей в сутки. Для нашего сайта это небольшая цифра, сказалась, в том числе, необходимость установки Service Worker’а, то есть своего рода инфицирование пользователя.

На данный момент мы имеем около 6 тысяч пользователей в сутки. Это порядка 180 000 в месяц.

Еще мы замеряем, сколько пользователей пришло к нам из офлайна на основную версию сайта – это около 3 000. Несложно посчитать, что половина куда-то пропали – с этим мы разбираемся.

Когда мы только запускали приложение, мы рассчитывали на мобильную аудиторию – метро, дача, рыбалка и т.д. Но после запуска оказалось, что 30% это десктопы. Для нас это было, честно говоря, неожиданно! На десктопах у нас до сих пор это выглядит, как просто мобильная версия, но в планах исправить.

Неожиданные применения Service Worker’а. Блокировка сайтов

Некоторое время назад была новость о блокировке российских СМИ на Украине. Вообще тема блокировок и у нас достаточно актуальна. Пока админы настраивают бесконечные зеркала, мы с вами можем сообщить пользователю о переезде на другой домен или дать какую-то информацию.

Поможет в этом нам тот же Service Worker!

Когда провайдер блокирует сайт по урлу, он в большинстве случаев делает простой 302 редирект. В итоге нам всего-то и нужно отловить 302 статус ответа сервера через Fetch.

Как уже было сказано, когда мы уходим через Fetch в исключения, мы наоборот отлавливаем request и проверяем на response.status. Здесь response.status = 0 – не 302 или 301, а именно 0. Service Worker в случае редиректов не понимает вообще, что происходит у вас на сервере и отдает статус 0.

Для отлавливания ошибок сервера 5ХХ надо модифицировать предыдущий вариант. Все то же самое, но статус приходит правильный, поэтому мы можем спокойно ловить и показывать какой-то контент.

Это можно использовать, если у вас наглухо лежит сервак, пока админы пытаются его поднять, front героически отдает какую-то информацию либо из кэша, либо из резервного источника.

Немного о поддержке в браузерах

В IE, Edge и Safari Service Worker’ не работает:

  • IЕ можно сразу забыть.
  • Edge находится в стадии разработки без указания конкретных сроков.
  • В Safari написано, что рассматривается поддержка в течение ближайших 5 лет.

На самом деле, он там есть, но выключен по умолчанию. Его можно включить через функции разработчика, но для продакшн и для пользователей вы его не запустите.

В мобильных браузерах, тоже не так уж все и плохо. Все работает в Android Browser 5-6 версии и в Chrome for Android – это примерно 55% нашей аудитории.

Резюме

✓ Offline работает уже сейчас.

✓ Как бонус, можно отлавливать ошибки, редирект и вообще любые статусы.

✓ Расширение доступности сайта — теперь вы не только в online, но и в offline.

P.S.: Работа с offline – это часть PWA (Progressive Web Applications) но мы специально обошли эту тему стороной.

Гитхаб профили Алексея Чернышева – https://github.com/nanomen и

Максима Чагина – https://github.com/maxchagin.

В ответах на вопросы от слушателей нередко полно занимательной информации. Их мы спрятали под спойлер, практически в первозданном виде, т.е. с максимальным количеством подробностей.

Вопросы-ответы — У меня 2 вопроса:

1. Первый – я бы хотел еще раз понять, как происходит инвалидация скриптов, которые загрузил Service Worker?

2. Второй вопрос – правильно ли я понимаю, что, когда я открываю какую-то новостную страничку, в которой есть популярные статьи, то по идее их можно заранее загрузить, чтобы в следующий раз, когда я на нее нажму на сайте, запрос на сервер не шел, а скачивалась бы сохраненная страничка?

Максим: Я сначала отвечу на второй вопрос. Теоретически, да, это возможно. Но дело в том, что ресурс обновляется очень быстро. Тебе же не интересно то, что было вчера? Есть вариант с Push-нотификацией. Пользователи, которые подписаны на Push–нотификацию, когда она приходит, Service Worker просыпается, и после этого может загрузить в кэш статью, которую мы «пушнули». В этом случае он может открыть ее даже без интернета.

В других случаях мы просто обновляем какие-то интересные статьи. У нас редакция помечает интересные статьи специальным тэгом и она отправляется заранее пользователю в кэш.

Алексей: Первый вопрос. Есть регистрация, установка и активация. Эти 3 события возникают только в тот момент, когда либо Service Worker устанавливается на сайте первый раз, либо когда мы в Service Worker файл поменяли руками и перезалили его. Каждые сутки смотрится эта хэш-сумма, проверяется браузером, обновился он или нет.

Только в этот момент опять срабатывает событие регистрация. Как раз во время регистрации он проверяет, надо его дальше обновлять или нет. И потом всплывает установка и активация.

Самый сложный момент – это активация. Представьте – есть 2 версии Service Worker’а: старая и новая. Старая работает. У пользователя открыты вкладки со старой версией. Он открывает новую страницу, и у него уже новый Service Worker пытается проломиться.

По соображениям разработчиков, если мы сейчас всем обновим Service Worker, тогда все эти старые страницы переломаются. Мало ли, что у нас Service Worker делает? Поэтому новый Service Worker устанавливается, он может что-то сделать в момент установки – в кэш что-то записать. И после этого он блокируется и начинает ждать. У него бесконечное ожидание, пока не закроются страницы, использующие старый Service Worker.

После того, как закроем их все или полностью браузер, новый Service Worker просит активацию. В этот момент мы что-то можем сделать (а можем и не сделать) – тут есть определенный инструментарий в Service Worker’е, и мы можем им пользоваться (или не пользоваться). Мы можем события установи и активации не обрабатывать. Мы там подчищаем то, что не нужно – старый кэш. Потом активация возникает – и все.

— Судя по вашим слайдам, у вас на всех Safari ничего нет?

Да, все это работает только на Android. В Safari это не работает в принципе. Если вы в мобильнике откроете, он не заработает. У нас была проблема – у руководства только Айфоны, они заходят и говорят: «Ребята, вы чем вообще занимаетесь?!»

— Отсюда и вопрос. По вашей же статистике это примерно 50% аудитории. А не пробовали AppCash использовать, как fallback?

Максим: Нет, не пробовали. На самом деле, эту штуку мы сделали, чтобы не то, чтобы поиграться, а интересно было. Поэтому что-то докручивать, допиливать нет смысла.

Алексей: Тут в чем дело? Все началось, как я и рассказывал, с нотификации. То есть вроде бы у нас уже есть Service Worker, а потом мы посмотрели доклад Лента.ру – они крестики-нолики сделали – почему бы и нет? Только давайте уже не игру, а ленту с новостями. И оно как-то поехало.

То есть у нас не было задачи – а давайте мы теперь еще и офлайн зацепим. Оно как-то случайно возникло. Просто в чем самый интерес – в том, что на самом деле написать эту офлайн версию не очень сложно. Самое сложное понять, как эти события отрабатываются. А так просто отдавать что-то из кэша совсем не сложно.

Мы по-быстрому ее запилили, а потом из этого стали возникать проблемы, про которые я рассказывал, в том числе с аналитикой.

Максим: У нас есть еще конкретная проблема – это монетизация. То есть пока мы не монетизируем офлайн, что-то делать на остальной процент аудитории достаточно бесполезно. Рекламы там нет.

— А как же лояльность пользователей?

Те, кто не знает, что сайт офлайн работает, они и не знают. Это не то, что необходимость, это именно бонус, довесок.

Алексей: Я бы даже добавил, что это скорее для тех, кто в принципе посещает сайт, а не просто зашел туда с поисковика случайно. Это бонус для постоянных посетителей. Я заметил, как жена залипла и всю дорогу в метро залипала новости. К сожалению, об этом нужно как-то узнать. Мы никакие баннеры по этому поводу не вешали, никому не говорили, что у нас офлайн.

— Что можно сделать, чтобы при первичной загрузке приложение быстрее работало? Я сейчас пробую – оно секунд 30 может висеть. В принципе, прикольно – там 10 статей есть, залипать в метро хватит.

Максим: Если у тебя нет интернета, то браузер пытается доконнектиться до него. В это время мы не можем ничего показать.

Алексей: В том-то и прикол Service Worker’а – внутри него, когда мы Fetch обрабатываем, этот запрос уходит в Promise, и он ждет – либо ему уйти в resolve, либо в reject. В этот момент гипотетически, может быть, можно что-то вне этого засунуть, но вряд ли. Мы либо то обрабатываем, либо то.

В том и была проблема – это наша больная тема, когда по глупости в SPA приложении самого офлайн мы запрашивали данные через Fetch. Раз нет интернета, зачем ты через Fetch запрашиваешь данные? Соответственно система пытается получить эти данные, а интернета нет, и так происходят задержки.

Та же история, если я нажимаю «Назад» — это чуть-чуть больше напрягает. Ходил по онлайн версии, потом пропал интернет, я попал в офлайн, нажал «Назад» — и он долго думает, пытаясь отправить запрос, а это не получается.

Если в настройках выключены мобильные и WI-FI, он в принципе тогда очень быстро тогда должен отлавливать. Был бы метод понять, что интернет не слишком хорош, чтобы отдать тебе полную версию – над этим надо работать.

— Мы тоже недавно сделали офлайн-версию, но мы не делали отдельную. Есть очень короткий вопрос – у вас правда 50% iOS?

45% iOS.

И по поводу самой технологии – вы, если я правильно понял, сначала по сети пытаетесь получить данные, потом подаете из кэша. Можно сделать наоборот и периодически их актуализировать.

И второй вопрос – что вы делаете с медиа ресурсами? Статья – это же не только текст, это еще какой-то обвес интерактивный, и что у вас с трафиком, как следствие?

Максим: Мы специально рассчитываем на мобильную аудиторию, поэтому мы не грузим вообще никаких медиа ресурсов туда. То есть там нет фотографий. Поэтому у нас следующая итерация – загрузка туда медиа. Мы собираемся оптимизировать это для десктоп, показывать изображения, превью и грузить медиа-контент. Думаю, до фоторепортажей и видео мы, скорее всего, не дойдем, но какое-то небольшое медиа там будет.

Алексей: Так вышло, мы любим пользователей. Просто не хочется все пихать в браузер. Гипотетически можно реально прямо полную статью закатать в кэш, проблем нет. Но зачем?

Максим: У нас есть рекламная служба, которая пихает баннеры по 2-3 мБ пользователю. Если мы еще будем этим заниматься, то совсем нехорошо получится.

Алексей: Добавлю насчет кэша. Здесь есть все-таки различие: есть кэш, в который браузер кэширует какую-то страницу, это понятно. Он сам ее кэширует и мы этим управлять не можем. А вот как раз кэш API – если мы закэшировали, пока сами не удалим, оно там и будет валяться. Поэтому не хочется.

— Два вопроса. Во-первых, вы сказали, что у вас внезапно оказалась треть офлайн на десктопах, и вы собираетесь с этим что-то делать. Но вы разобрались, кто эти люди?

Максим: Да, это люди в основном из регионов. Можно даже посмотреть – у нас есть монитор, и там выведена офлайн версия в реальном времени, где мы смотрим регионы. Падает посещаемость – хоп! – какой-то регион отрубился. Десктопы в основном оттуда. Это жизнь. Мы здесь, в Москве, не знаем об этом. Оказывается у людей на десктопах нет интернета.

— Второй вопрос – вы сказали, что можно отловить редирект и в этот момент в случае блокировки что-то свое туда пропихнуть. Тут не очень понятно. Если вас уже заблокировали, то как вы сможете сказать, куда переезжать?

Максим: Это надо заранее сделать в Service Worker’е. Мы же все заранее знаем, кого из нас заблокируют. Что тут скрывать? Мы – федеральное издание, и нас блокируют тоже – где-то кто-то указал не ту информацию – например, в Краснодаре нас заблокировали. Но мы сейчас не об этом.

Мы конкретно напряглись, когда на Украине СМИ начали блокировать, а нас, что обидно, не заблокировали! Вроде бы мы тоже крупное СМИ!

Это все надо заранее продумать и закинуть туда. При этом важный момент, что после того, как тебя заблокировали, ты уже Service Worker не обновишь – это уже мертвая точка. Там можно import script сделать, то есть такие хитрости — подгрузить его с другого домена, из CDN. В этом же домене Service Worker не обновится потому, что домен уже не существует, у тебя его уже отобрали.

Это может быть такая же страница сайта, ты можешь там написать: «Чувак, мы переехали сюда!» Как узнать заранее, куда переехали – это надо продумать! Тут должна быть стратегия продумывания на 5 лет вперед, как Safari делает.

Если у вас небольшой сайт и вас не будут блокировать, здесь клевая штука – это отлавливать ошибки сервера. Вообще потрясающая вещь, можно вообще без проблем показывать реальный контент, из кэша или резервного источника, Причем это делается буквально за 5 минут – просто копипастом.

Алексей: В Service Worker обычный JavaScript. Там ничего такого нет. Можно Fetch’и использовать без всяких полифилов. Если Service Worker работает, то уж Fetch точно будет работать. Плюс Е6 можно использовать вообще по полной. Хотите стрелочные функции – наслаждайтесь! Все без проблем, никаких полифилов, просто все грузите в Service Worker, и все будет работать.


Приходите делиться опытом

Дорогие друзья, наверняка вы тоже сталкиваетесь с интересными задачами и находите элегантные пути решения. Не надо их недооценивать, вам кажется, что все просто, потому что вы уже все сделали, а кто-то еще не знает с чего начать.

Выберете подходящее направление на фестивале конференции РИТ++ и отправьте заявку программному комитету. Для тех, кто сомневается в своих лекторских способностях, напоминаем, что уж в этом мы вам поможем.

habr.com

Четыре способа загружать и читать сайты оффлайн

Если вам нужно скачать сайт или отдельные страницы, рекомендуем несколько проверенных и надежных способов.

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). Это расширение, по существу, является улучшенной версией встроенного инструмента для сохранения страниц. Оно гарантирует, что страница будет загружена в точности так, какая она есть, и сжимает файл для уменьшения занимаемого дискового пространства. В дополнение к этому, оно загружает все аудио- и видеофайлы на страницах.

 

 

newreporter.org

Программа для скачивания сайтов Offline Explorer Pro

Несмотря на растущую популярность различного рода “облачных” хранилищ, большинство пользователей по-прежнему предпочитают хранить файлы на личном компьютере. Но как быть с информацией, которая по определению должна располагаться на удаленных серверах? Например, с обыкновенными сайтами?

Можно ли их скачать и сохранить на жесткий диск, как картинку или музыкальный трек? Оказывается можно. Для этой цели существуют особые программы, так называемые offline-браузеры – универсальные загрузчики, предназначенные для скачивания как отдельных веб-страниц, так и целых сайтов с полным сохранением их изначальной логической структуры.

Из всех известных на данный момент offline-браузеров самой лучшей, пожалуй, является Offline Explorer Pro от известного разработчика MetaProducts Systems. Эта невероятно мощное и функциональное приложение позволяет загружать даже самые сложные динамические сайты с использованием последних веб-технологий.

В процессе загрузки Offline Explorer преобразует динамические страницы в статические, что позволяет в конечном результате просматривать их в оффлайн-режиме без использования эмуляторов удаленного сервера.

При этом программа успешно “захватывает” и сохраняет связанные с веб-страницами элементы:

  • пользовательские файлы
  • картинки
  • стилевые
  • скрипты
  • архивы
  • аудио
  • видео
  • флеш

Программа для скачивания сайтов Offline Explorer Pro

Благодаря гибко настраиваемым фильтрам пользователь может выбирать, какие объекты нужно загружать, а какие нет. Например, вас интересует исключительно текстовые данные, и вы не хотите тратить время на загрузку изображений. Нет ничего проще. Установите соответствующий фильтр, и Offline Explorer Pro скачает только то, что вам нужно.

Хотите “вытащить” из сайта одни изображения – программа легко справится и с этой задачей. Продвинутая система фильтрации также позволяет отсеивать даже такие элементы как каталоги форумов, голосований, вывод на печать и тому подобное.

Программой поддерживаются многопоточная загрузка, защита от скачивания дубликатов, MMS:// и RTSP:// протоколы, функции автодозвона, скачивание по расписанию, автоматическое предотвращение перегрузки каталогов, работу с шаблонами, прокси-серверами, командной строкой, файлами cookie, сайтами, требующими авторизации пользователя, использование макрокоманд, экспортирование проектов в архивы, а также множество других полезных функций.

Программа для скачивания сайтов Offline Explorer Pro

Интерфейс Offline Explorer Pro

Пользовательский интерфейс может показаться довольно непростым и даже сложным. И действительно, программа обладает огромным количеством опций, настроек и любопытных особенностей.

Тем не менее, работать с Offline Explorer Pro сможет даже начинающий пользователь и все благодаря удобному пошаговому Мастеру. Но перед тем как приступать к описанию его работы, давайте вкратце ознакомимся с интерфейсом приложения в целом.

Рабочее окно разделено на четыре основных области. Сверху располагается лента меню, представленная девятью вкладками, нижнюю часть занимает область статуса загрузок – здесь находятся инструменты управления потоками, а также отображаются сами потоки.

Программа для скачивания сайтов Offline Explorer Pro

Особое место занимает вкладка “Файл”. Раздел содержит уже готовые шаблоны с предустановленными настройками. Ими можно воспользоваться для извлечения из веб-сайтов определенных элементов – картинок, медиафайлов, flash-роликов и т.д. Большую часть средней области занимает окно просмотрщика сайтов.

Встроенный оффлайн-браузер выполнен в стиле Internet Explorer и обладает сходным набором инструментов. Доступны кнопки “Назад”, “Вперед”, “Обновить”, также имеется возможность управления всплывающими окнами, изображениям, вывод на печать, просмотр в полноэкранном режиме.

Меньшую часть средней области занимает окошко проектов. Здесь вы можете переключаться между загруженными сайтами, просматривать отдельные страницы или файлы.

Программа для скачивания сайтов Offline Explorer Pro

Как работать с программой

А теперь рассмотрим работу программы на примере создания конкретного проекта с помощью Мастера. Это самый простой и удобный способ, а поэтому почти что идеальный для начинающего пользователя. В первом окне Мастера следует указать URL, с которого начнется загрузка. Как правило, это адрес главной страницы сайта.

Далее указываем глубину уровня загрузки.

Например, если вам необходимо скачать только одну страницу, значение должно равняться единице. Если же выставить двойку, программа проследует по внутренним ссылкам и скачает все страницы второго уровня, соответственно значение равное трем приведет к загрузке страниц третьего уровня и так дальше. Для скачивания всего сайта отметку ограничения нужно снять вообще.

Программа для скачивания сайтов Offline Explorer Pro
Программа для скачивания сайтов Offline Explorer Pro
Программа для скачивания сайтов Offline Explorer Pro

В третьем окне Мастера можно выставить ограничения, например на загрузку архивов или видео. Более гибко настроить фильтры можно в свойствах проекта.

В четвертом окне обратите внимание вот на что: при скачивании целого сайта опция “Загружать только с начального адреса” должна быть включена, иначе программа уйдет гулять по всем интернету.

Далее Offline Explorer Pro предложит либо загрузить выбранный сайт, либо создать его карту. Загруженный проект можно просматривать в полноэкранном режиме, за архивировать, скомпилировать в исполняемый файл или опубликовать в интернете.

Программа для скачивания сайтов Offline Explorer Pro
Программа для скачивания сайтов Offline Explorer Pro

Для того чтобы разобраться с остальными возможностями этой замечательной программы, вам придется немного покопаться. К счастью приложение имеет встроенный русскоязычный мануал, что не так уже и часто можно встретить в программах иностранных разработчиков. В настоящее время на сайте разработчика для скачивания доступна версия под индексом 6.3. Надо отметить, обновляется Offline Explorer Pro с завидной регулярностью, что не может не свидетельствовать о внимании разработчика к собственному продукту. Как и следовало бы ожидать, программа платная.

Вполне демократической цену вряд ли назовешь – 149,95 $ это конечно не Бог весть какая сумма, тем не менее, на наш взгляд она мягко сказано, слегка завышена.

Программа для скачивания сайтов Offline Explorer Pro
Программа для скачивания сайтов Offline Explorer Pro

Неоправданно высокая цена не единственный недостаток. При работе с рядом сайтов не исключены ошибки отображения, как можно видеть на примере этого предпоследнего скриншота. И это не смотря на то, что в нашем примере используется самая последняя версия Offline Explorer Pro.

В триальном режиме пользоваться программой можно бесплатно в течение 30-ти дней.

Другим, менее приятным ограничением является урезанный объем данных, которые можно скачать с одного домена.

В демонстрационном режиме вы сможете полностью загружать только те сайты, общий объем которых составляет не более 2000 файлов, включая веб-страницы, изображения и другие объекты.

Скачать программу вы может с сайта производителя

www.softrew.ru

18 приложений для путешествий, которые работают без интернета

18 приложений для путешествий, которые работают без интернета

18 приложений для путешествий, которые работают без интернета

Ребята, мы вкладываем душу в AdMe.ru. Cпасибо за то,
что открываете эту
красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook
и ВКонтакте

Каждый путешественник знает, как нелегко бывает в поездках без интернета. Однако это не значит, что вам придется везти с собой кипу бумажных карт или платить бешеные деньги за трафик.

AdMe.ru собрал 18 приложений, которые помогут вам в поездке и без доступа в сеть.

Офлайн-карты

18 приложений для путешествий, которые работают без интернета

Подробные карты всех стран и городов из любой точки мира! Все, что нужно сделать, — это заранее загрузить карту нужной вам страны. Также можно проложить маршрут, делать закладки интересных мест и определять свое местоположение. Заблудиться нереально!

18 приложений для путешествий, которые работают без интернета

Офлайн-карты, детальная информация, популярные места и полезные советы. Все функции, — например, поиск по адресу, рецензирование и определение местоположения по GPS — также работают без доступа в интернет.

18 приложений для путешествий, которые работают без интернета

Отличное приложение для путешествий по России: адреса, телефоны, время работы компаний доступны в любой момент. Поиск проезда на общественном транспорте или на личном автомобиле поможет добраться до найденного по самым оптимальным маршрутам.

Конвертеры валют

18 приложений для путешествий, которые работают без интернета

Самый известный конвертер валют, который облегчит шопинг в любой стране. Благодаря офлайн-режиму нет необходимости заходить в интернет, все актуальные данные уже подгружены.

Легкий конвертер валют

18 приложений для путешествий, которые работают без интернета

Мировые валюты (180+), актуальные курсы обмена валют, избранное, офлайн-режим, графики.

Путеводители

18 приложений для путешествий, которые работают без интернета

www.adme.ru

Яндекс.Переводчик для iOS и Android, работает онлайн и офлайн

Яндекс.Переводчик

Полиглот в кармане
Приложение знает более 90 языков, в том числе несколько искусственных, и помогает пополнять словарный запас. Есть перевод обычного текста, перевод надписей с картинок и человеческой речи — покажите фотографию таблички на незнакомом вам языке или попробуйте сказать ему что-нибудь. Работает на iOS, Android и Android Wear.

для смартфонов на базе Android™ 2.3.3 и выше, также доступно на iPhone ;

mobile.yandex.ru

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *