Как сделать страницу автономной
Обновлено: 14.05.2024
Автономный просмотр в Google Chrome – это то, что ищут многие пользователи Chrome. Когда вы подключены к Интернету и посещаете любой веб-сайт, на нем отображаются последние веб-страницы, загружаемые с сервера. Но что, если вы не подключены к Интернету и по-прежнему хотите получить доступ к веб-страницам, которые вы недавно посещали? Предположим, вы путешествуете и не можете подключиться к Интернету, но все же хотите получить доступ к ранее посещенным веб-страницам в Google Chrome? Тогда эта статья для вас. Я дам вам знать, как сделать автономный просмотр в Google Chrome.
Автономный просмотр в Google Chrome
Mozilla Firefox и Internet Explorer предлагают возможность автономного режима. Если этот параметр включен, то каждая копия веб-страницы, которую вы посещаете, сохраняется как кэшированная копия, когда вы подключены к Интернету, и к ней можно получить доступ, когда вы не подключены к Интернету или не подключены к сети. Теперь мы увидим, как включить автономный просмотр в Google Chrome.
Выберите нужный вариант, и вам будет предложено перезапустить Chrome. После перезапуска Chrome, теперь, чтобы сначала протестировать эту функцию, вам нужно отключить ноутбук или любое другое устройство от Интернета, либо отключив локальную сеть, либо отключив Wi-Fi.
Это то, что автономный просмотр в Google Chrome. Это действительно удобно, когда вы находитесь в полете или не в интернете и хотите получить доступ к уже посещенным веб-страницам.
Я хочу сделать свой сайт доступным в автономном режиме, даже если пользователь очищает кэш и куки. Это возможно? Также я имею дело с базой данных. Можно ли обрабатывать базы данных в автономном режиме?
пользователь может хранить местные копия один веб-страница с помощью Chrome (щелкните правой кнопкой мыши save-as), и она будет хранить все ресурсы (изображения, css, js) требуется для полной загрузки страницы в автономном режиме. Другие браузеры будут иметь аналогичные опции.
можно использовать команды wget чтобы отразить весь веб-сайт для автономного просмотра.
конечно, ни один из этих параметров не будет обрабатывать базу данных управляемые элементы вашего сайта / страницы.
Если вы хотите издеваться над базой данных или динамическими элементами страницы в автономном режиме, то Google Gears вероятно, ближе всего к тому, что вы ищете, но я думаю, что это было устарело Google в прошлом году.
Если у ваших пользователей есть современные браузеры, попробуйте кэш приложений HTML5.
Как сделать так, чтобы пользователь смог использовать ваш сайт, даже если пропало интернет подключение или его вообще нет? Сегодня мы об этом и поговорим.
Для чего это нужно?
Ваши пользователи больше не используют свои десктопные компьютеры, подключенные по проводам к интернету. Они посещают ваш сайт с телефона в лифте, с планшета в метро или с ноутбука, пока тесно сидят на месте 25E.
Именно по этому современные браузеры поддерживают ServiceWorkers, новую технологию, которая позволяет вам предоставлять пользователям доступ к вашему сайту, даже если они не в сети.
UpUp - это бесплатный, open source проект, который позволяет использовать эту современную магию всего лишь вызовом одной команды.
UpUp.start( 'content-url': 'offline.html' // покажет эту страницу пользователям не в сети
>);
Как это работает?
UpUp использует ServiceWorkers для определения потери соединения. ServiceWorkers - это специальный скрипт, который работает в браузере в фоновом режиме и может следить за статусом сети.
Когда пользователь посещает ваш сайт в первый раз, UpUp регистрирует ServiceWorker с вашим браузером и дает ему список файлов, которые нужно закэшировать.
Следующий раз, когда пользователь посещает ваш сайт, ServiceWorker слушает сеть на наличие ошибок. Если соединение потеряно, и ServiceWorker найдет нужные файлы в кеше, то он вернет их также, как если бы они пришли из сети.
Итак, сегодня мы рассмотрели очень интересную технологию, которой, думаю, вы сможете найти применение. Спасибо за внимание!
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 3 ):
Полезная статья ребята
Здравствуйте Михаил не могли бы вы написать статью на тему WebRTC видео конференции т.д думаю многим будет интерестно спасибо
Возьмём на заметку! Спасибо!
При идеальных обстоятельствах пользователь всегда обеспечит себе хорошее интернет-соединение, но в жизни редко что бывает идеальным. К счастью, при сборке веб-приложения у нас есть service worker, способный кэшировать сетевые ответы.
В случае потери сетевого соединения или слишком длительного ожидания мы можем использовать эти кэшированные ответы, чтобы отобразить запрашиваемую пользователем страницу и позволить ему продолжить работу с приложением, несмотря на отсутствие подключения. К сожалению, наш кэш не всегда совершенен. Иногда пользователь будет пытаться перейти на страницу, которая еще не кэшировалась.
К счас т ью, мы, разработчики, люди толковые и можем показать фирменную офлайн-страницу. Таким образом, у пользователя все еще сохраняется впечатление, что он использует наше веб-приложение, даже когда соединение потеряно. Приведем примеры:
Этот принцип позволяет сохранить последовательность пользовательского опыта во время сетевых сбоев и является предпочтительным вариантом реагирования на них нативных приложений.
Но возможности подобных страниц этим не ограничиваются. С их помощью также можно предложить пользователю какое-нибудь увлекательное занятие, например разгадывание кроссворда. Именно так вам предстоит провести время на офлайн-странице блога разработчиков “The Guardian” в момент потери соединения.
Создание полезной офлайн-страницы для большинства веб-приложений
В данной статье мы создадим функциональность, полезную для многих приложений и веб-сайтов, которая позволит частично использовать ваше приложение даже в офлайн-режиме. Ее цель — показать пользователю список подходящих кэшированных страниц.
Здесь в качестве примера приложения приводится FeedReader, программа для чтения формата RSS, благодаря которой пользователь может прочитать текстовый контент RSS-канала по URL-адресу, например вот такому:
Этот шаблон применяется во многих веб-приложениях и будет работать до тех пор, пока есть кэшированные страницы.
Шаг 1. Предварительное кэширование офлайн-страницы
Прежде всего, нам нужно сохранить офлайн-страницу при запуске приложения. С этой целью при старте были кэшированы HTML-файл /offline/ и его ресурсы /offline.js через заполнение кэша во время события install , выполняемого сервис-воркером.
Шаг 2. Показ офлайн-страницы
Далее, когда пользователь пытается перейти на страницу, которой у нас нет, мы можем показать кэшированную страницу /offline/ .
Шаг 3. Получение списка кэшированных страниц
Если не сработал ни один из рассмотренных вариантов, то на этом этапе показывается офлайн-страница. Теперь в качестве альтернативы предоставим пользователю список кэшированных страниц, которые могли бы его заинтересовать.
Сначала необходимо открыть кэши веб-приложений для поиска страниц, к которым нужно получить доступ:
Так мы получаем массив кэшей.
После этого требуется найти все кэшированные страницы из этого массива. С помощью cache.matchAll и ignoreSearch: true получим все результаты кэша в конечной точке /feed/ .
Инструкция results возвращает массив массивов, отражая результаты, полученные из каждого кэша. Далее мы произведем уплощение и обработаем каждый кэшированный ответ.
Поскольку нашей единственной целью является предоставление пользователю нужных страниц, мы будем обращать внимание на параметры запросов для поиска только самых интересных из них. В следующем примере они запрашивают RSS-канал через параметр url :
Без параметра запроса url страница не представляет интереса, поэтому мы ее не показываем.
Шаг 4. Отображение списка
На данном этапе мы располагаем URL-адресами страниц и необработанными параметрами запросов, но в таком виде они могут не понравиться пользователю. Можно показать более привлекательные ярлыки, если обратиться к самому кэшированному содержимому.
Для извлечения данных из ответа нам необходимо получить его текст:
Если ваши данные хранятся в формате JSON, то JSON.parse будет достаточно для извлечения любой интересной информации, например заголовка хорошей страницы.
Учитывая, что наш веб-сайт отображается на стороне сервера и использует HTML, я выполню парсинг HTML. К счастью, веб-браузеры прекрасно справляются с этой задачей. Мы преобразуем необработанный текст в фрагмент документа, который можно запросить с помощью обычных методов DOM.
В следующем примере прочитаем текст в теге . Другими подходящими элементами для запроса были бы
, позволяющие получить первый заголовок в документе.
С помощью заголовка и ответа URL создаем ссылку, которую можно добавить к элементу списка, чтобы получить список страниц.
Анимация ниже отражает принцип работы нашей офлайн-страницы и был создан при помощи Chrome, имитирующего отсутствие сетевого соединения.
Читайте также: