Кэширование приложений HTML5

С помощью кэширования приложений, созданного через файл manifest cache, можно легко создать офлайн-версию web-приложения.

Что такое кэширование приложений?

HTML5 ввел кэширование приложений (Application Cache), что означает возможность кэширования web-приложений и доступа к ним без подключения к интернету.

Кэширование приложений приносит трем преимуществам:

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

Поддержка браузерами

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

API
Приложение Cache 4.0 10.0 3.5 4.0 11.5

Пример HTML Cache Manifest

Следующий пример показывает HTML-документ с cache manifest (для использования в автономном режиме):

Пример

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Содержимое документа ......
</body>
</html>

Попробуйте сами

Основы Cache Manifest

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

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

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

Рекомендуемое расширение файла для манифеста - "appcache".

Внимание:Манифест файла требует правильного MIME-type, то есть "text/cache-manifest". Необходимо настроить его на веб-сервере.

Манифест файла

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

Манифест файла имеет три части:

  • CACHE MANIFEST - В этом заголовке указанные файлы будут кэшироваться после первого скачивания
  • NETWORK - В этом заголовке указываются файлы, которые требуют подключения к серверу и не будут кэшироваться
  • FALLBACK - В этом заголовке указываются файлы, которые будут использоваться в качестве резервных страниц (например, страница 404) при недоступности страницы.

CACHE MANIFEST

Первая строка, CACHE MANIFEST, обязательна:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

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

NETWORK

Следующий раздел NETWORK устанавливает, что файл "login.php" никогда не будет кэшироваться и будет недоступен в автономном режиме:

NETWORK:
login.asp

Можно использовать звездочку (*) для указания, что все другие ресурсы/файлы требуют подключения к интернету:

NETWORK:
*
FALLBACK

Следующая часть FALLBACK определяет, что если не удалось установить соединение с интернетом, то все файлы в каталоге /html/ будут заменены на "offline.html":

FALLBACK:
/html/ /offline.html

Комментарий:Первый URI - это ресурс, второй - запасной.

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

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

  • Пользователь очищает кэш браузера
  • Файл manifest был изменен (смотрите下面的 советы)
  • Обновление приложения кэша программно

Пример - Полный файл Cache Manifest

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Совет:Строки, начинающиеся с "#", являются строками комментариев, но могут также использоваться для других целей. Кэш приложения обновляется только при изменении файла manifest. Если вы редактируете изображение или изменяете функцию JavaScript, эти изменения не будут повторно кэшированы. Обновление даты и версии в строках комментариев - это способ заставить браузер повторно кэшировать файлы.

Внимание: замечания по приложению кэша

Будьте внимательны к содержимому кэша.

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

Комментарий:Ограничения объема кэшируемых данных в браузерах могут варьироваться (ограничения某些 браузеров составляют 5 МБ на каждый сайт).