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

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

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

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

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

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

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

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

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 МБ на каждый сайт).