вход на сайт

Имя пользователя :
Пароль :

Восстановление пароля Регистрация

Руководство для начинающих по использованию кэша приложений

  1. Вступление
  2. Файл манифеста кэша
  3. Ссылка на файл манифеста
  4. Структура файла манифеста
  5. Обновление кеша
  6. Статус кэша
  7. События AppCache

Вступление

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

Использование интерфейса кеша дает вашему приложению три преимущества:

  1. Автономный просмотр - пользователи могут перемещаться по всему сайту в автономном режиме
  2. Скорость - ресурсы поступают прямо с диска, без подключения к сети.
  3. Отказоустойчивость - если ваш сайт отключен для «обслуживания» (например, кто-то случайно все сломает), ваши пользователи получат возможность работы в автономном режиме

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

Файл манифеста кэша

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

Ссылка на файл манифеста

Чтобы включить кэш приложения для приложения, включите атрибут manifest в тег html документа:

<html manifest = "example.appcache"> ... </ html>

Атрибут manifest должен быть включен на каждую страницу вашего веб-приложения, которую вы хотите кэшировать. Браузер не кэширует страницу, если он не содержит атрибут манифеста (если только он явно не указан в самом файле манифеста. Это означает, что любая страница, на которую пользователь переходит, содержит манифест, будет неявно добавлена ​​в кэш приложения. Таким образом, нет необходимости перечислять каждую страницу в манифесте. Если страница указывает на манифест, нет способа предотвратить кэширование этой страницы.

Примечание: "/ page-url /", "/ page-url /? Что-то", "/ page-url /? Что-то еще" считаются отдельными страницами. Если они ссылаются на манифест, все они будут неявно кэшироваться отдельно. Из-за этого и другие ошибки AppCache лучше всего использовать в приложениях с одним URL.

Вы можете увидеть URL, которые контролируются кешем приложения, посетив chrome: // appcache-internals / в Chrome. Отсюда вы можете очистить кеши и просмотреть записи. Есть аналогичные инструменты разработчика в Firefox.

Атрибут манифеста может указывать на абсолютный URL или относительный путь, но абсолютный URL должен находиться в том же источнике, что и веб-приложение. Файл манифеста может иметь любое расширение файла, но должен быть указан с правильным типом mime (см. Ниже).

<html manifest = "http://www.example.com/example.mf"> ... </ html>

Файл манифеста должен быть представлен с помощью mime-типа text / cache-manifest. Возможно, вам потребуется добавить пользовательский тип файла на ваш веб-сервер или в конфигурацию .htaccess.

Например, чтобы использовать этот mime-тип в Apache, добавьте эту строку в файл конфигурации:

AddType text / cache-manifest .appcache

Или в вашем файле app.yaml в Google App Engine:

- url: /mystaticdir/(.*\.appcache) static_files: mystaticdir / \ 1 mime_type: text / cache-manifest загрузка: mystaticdir / (. * \. appcache)

Это требование было удалено из спецификации некоторое время назад и больше не требуется в последних версиях Chrome, Safari и Firefox, но вам потребуется mime-тип для работы в старых браузерах и IE11.

Структура файла манифеста

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

CACHE MANIFEST index.html stylesheet.css images / logo.png scripts / main.js http://cdn.example.com/scripts/main.js

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

Есть несколько вещей, на которые стоит обратить внимание:

  • Строка CACHE MANIFEST является первой строкой и является обязательной.
  • Файлы могут быть из другого домена
  • Некоторые браузеры накладывают ограничения на объем квоты хранилища, доступный для вашего приложения. В Chrome, например, AppCache использует общий бассейн ВРЕМЕННОГО хранилища, которое могут совместно использовать другие автономные API. Если вы пишете приложение для Интернет-магазин Chrome Использование unlimitedStorage снимает это ограничение.
  • Если сам манифест возвращает 404 или 410, кэш удаляется.
  • Если манифест или указанный в нем ресурс не загружаются, происходит сбой всего процесса обновления кэша. Браузер будет продолжать использовать старый кэш приложения в случае сбоя.

Давайте посмотрим на более сложный пример:

CACHE MANIFEST # 2010-06-18: v2 # Явно кэшированные «основные записи». CACHE: /favicon.ico index.html stylesheet.css images / logo.png scripts / main.js # Ресурсы, которые требуют, чтобы пользователь был в сети. СЕТЬ: * # static.html будет обслуживаться, если main.py недоступен # offline.jpg будет использоваться вместо всех изображений в изображениях / large / # offline.html будет использоваться вместо всех других файлов .html FALLBACK: /main.py /static.html images / large / images / offline.jpg

Строки, начинающиеся с «#», являются строками комментариев, но могут также служить другой цели. Кэш приложения обновляется только при изменении файла манифеста. Так, например, если вы редактируете ресурс изображения или меняете функцию JavaScript, эти изменения не будут повторно кэшироваться. Вы должны изменить сам файл манифеста, чтобы сообщить браузеру обновить кэшированные файлы .

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

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

Манифест может иметь три отдельных раздела: CACHE, NETWORK и FALLBACK.

CACHE: это раздел по умолчанию для записей. Файлы, перечисленные в этом заголовке (или сразу после манифеста CACHE), будут явно кэшироваться после первой загрузки. СЕТЬ: Файлы, перечисленные в этом разделе, могут поступать из сети, если их нет в кэше, в противном случае сеть не используется, даже если пользователь подключен к сети. Вы можете указать в списке определенные URL-адреса или просто "*", что разрешает все URL-адреса. Большинству сайтов нужно "*". FALLBACK: необязательный раздел, задающий резервные страницы, если ресурс недоступен. Первый URI - это ресурс, второй - запасной вариант, используемый при сбое или ошибках сетевого запроса. Оба URI должны иметь то же происхождение, что и файл манифеста. Вы можете захватывать определенные URL-адреса, а также префиксы URL-адресов. «images / large /» будет фиксировать сбои в URL-адресах, таких как «images / large / what / img.jpg».

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

Следующий манифест определяет страницу «catch-all» (offline.html), которая будет отображаться, когда пользователь пытается получить доступ к корню сайта в автономном режиме. Он также заявляет, что для всех других ресурсов (например, удаленных сайтов) требуется подключение к Интернету.

CACHE MANIFEST # 2010-06-18: v3 # Явно кэшированные записи index.html css / style.css # offline.html будет отображаться, если пользователь находится в автономном режиме FALLBACK: / /offline.html # Все остальные ресурсы (например, сайты) требуют пользователь должен быть онлайн. СЕТЬ: * # Дополнительные ресурсы для кэширования CACHE: images / logo1.png images / logo2.png images / logo3.png

Примечание . Файл HTML, который ссылается на файл манифеста, автоматически кэшируется. Нет необходимости включать его в свой манифест, однако это рекомендуется делать.

Примечание . Заголовки кэша HTTP и ограничения кэширования, накладываемые на страницы, обслуживаемые по протоколу SSL, переопределяются манифестами кэша. Таким образом, страницы, обслуживаемые через https, могут работать автономно.

Обновление кеша

Когда приложение находится в автономном режиме, оно остается в кэше, пока не произойдет одно из следующих действий:

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

Статус кэша

Объект window.applicationCache - это ваш программный доступ к кешу приложения браузера. Его свойство status полезно для проверки текущего состояния кэша:

var appCache = window.applicationCache; switch (appCache.status) {case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; перерыв; case appCache.IDLE: // IDLE == 1 return 'IDLE'; перерыв; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; перерыв; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; перерыв; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; перерыв; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; перерыв; по умолчанию: вернуть 'UKNOWN CACHE STATUS'; перерыв; };

Чтобы программно проверить наличие обновлений в манифесте, сначала вызовите applicationCache.update (). Это попытается обновить кэш пользователя (который требует изменения файла манифеста). Наконец, когда applicationCache.status находится в состоянии UPDATEREADY, вызов applicationCache.swapCache () заменит старый кеш на новый.

var appCache = window.applicationCache; appCache.update (); // Попытка обновить кеш пользователя. ... if (appCache.status == window.applicationCache.UPDATEREADY) {appCache.swapCache (); // Выборка прошла успешно, перестановка в новый кеш. }

Примечание : Использование update () и swapCache (), как это, будет означать, что новый кеш будет использоваться для последующих загрузок, но пользователь уже загрузит страницу и, вероятно, все ресурсы к этому моменту, эти файлы не будут автоматически перезагружаться. Вам необходимо обновить страницу, чтобы получить последнюю версию страницы и ресурсы, для которых не требуется вызывать swapCache ()

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

// Проверяем, доступен ли новый кеш при загрузке страницы. window.addEventListener ('load', function (e) {window.applicationCache.addEventListener ('updateready', function (e) {if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {// Браузер загрузил новый кеш приложения. if (подтвердите ('Доступна новая версия этого сайта. Загрузить?')) {window.location.reload ();}} else {// Манифест не изменился. Ничего нового для сервера.} }, ложь);}, ложь);

События AppCache

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

function handleCacheEvent (e) {// ...} function handleCacheError (e) {alert ('Ошибка: кэш не обновился!'); }; // Запускается после первого кэша манифеста. appCache.addEventListener ('cached', handleCacheEvent, false); // Проверка наличия обновлений. Всегда первое событие в последовательности. appCache.addEventListener ('check', handleCacheEvent, false); // Обновление найдено. Браузер загружает ресурсы. appCache.addEventListener («загрузка», handleCacheEvent, false); // Манифест возвращает 404 или 410, загрузка не удалась, // или манифест изменился во время загрузки. appCache.addEventListener ('error', handleCacheError, false); // Запускается после первой загрузки манифеста. appCache.addEventListener ('noupdate', handleCacheEvent, false); // Запускается, если файл манифеста возвращает 404 или 410. // Это приводит к удалению кэша приложения. appCache.addEventListener ('устарел', handleCacheEvent, false); // Запускается для каждого ресурса, указанного в манифесте, по мере его получения. appCache.addEventListener ('progress', handleCacheEvent, false); // Запускается, когда ресурсы манифеста были заново загружены. appCache.addEventListener ('updateready', handleCacheEvent, false);

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

Рекомендации

Что-то", "/ page-url /?
Загрузить?
Поиск по сайту
Меню
Реклама на сайте
Архив новостей
Реклама на сайте

Реклама на сайте







Архив сайта
Информация
www.home-4-homo.ru © 2016 Copyright. Все права защищены.

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