Кэш приложения при помощи создания файла манифеста позволяет легко делать оффлайн-версии веб-приложений.
Что такое кэш приложения?
HTML5 вводит такой механизм, как кэш приложения. Это означает, что приложение может быть сохранено в кэше и доступно при разорванном интернет-соединении.
Кэш приложения предоставляет следующие преимущества:
- Возможность автономной работы — пользователь может использовать приложение, когда соединение с сетью разорвано.
- Скорость — кэшированные ресурсы загружаются быстрее.
- Уменьшение нагрузки на сервер — браузер будет загружать с сервера только обновленные/измененные ресурсы.
Основы кэша приложения
Чтобы включить кэш приложения, необходимо определить атрибут manifest в теге <html>:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Любая страница с определенным атрибутом manifest при посещении пользователем будет кэшироваться. Если атрибут manifest не определен, то страница не будет кешироваться, за исключением тех случаев, когда страница напрямую определена в файле манифеста.
Рекомендуется, чтобы файл манифеста имел расширение ".appcache". При этом файл манифеста должен обслуживаться с корректным медиа-типом, а именно "text/cache-manifest", установленным в конфигурации сервера.
Файл манифеста
Файл манифеста — простой текстовый файл, который говорит браузеру что кэшировать, а что не кэшировать.
Файл манифеста состоит из трех секций:
- CACHE MANIFEST – все файлы, перечисленные под этим заголовком, при первой загрузке страницы будут кэшированы
- NETWORK – все файлы, перечисленные под этим заголовком, никогда не будут кэшироваться и для загрузки всегда будут требовать подключения к серверу
- FALLBACK – в этой секции перечисляются файлы, определяющие резервные страницы, которые будут задействованы, если страница недоступна
CACHE MANIFEST
Первая строка - CACHE MANIFEST — обязательна:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
Файл манифеста, представленный выше, перечисляет три ресурса: файл CSS, файл изображения и файл JavaScript. Когда данный файл манифеста загружен, браузер скачает эти три файла из корневой директории веб-сайта. После этого, все эти ресурсы будут доступны даже в случае разорванного соединения с сервером.
NETWORK
Секция NETWORK, представленная ниже, определяет, что файл "login.asp" никогда не должен кэшироваться и будет недоступен в оффлайне:
NETWORK:
login.asp
Символ звездочки определяет, что все другие ресурсы/файлы для доступа требуют соединения с интернетом:
NETWORK:
*
FALLBACK
В следующей секции FALLBACK указывается, что файл "offline.html" будет замещать все файлы в директории "/html/", если не удастся подключиться к интернету:
FALLBACK:
/html/ /offline.html
Здесь, первая URI – ресурс, вторая — резервная страница
Обновление кэша
Когда приложение кэшировано, оно остается кэшированным до тех пор, пока не произойдет одно из событий:
- пользователь очистил кэш браузера,
- файл манифеста был изменен,
- кэш приложения был программно обновлен.
Пример — Полный файл манифеста
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Строки, начинающиеся с символа "#", - комментарии, но при этом могут служить и другим целям. Кэш приложения обновляется только тогда, когда изменяется файл манифеста. Если вы замените изображение или добавите функцию JavaScript, то эти изменения приложения не вызовут его перекэширование. А вот изменение даты и версии в комментариях файла манифеста заставит браузер обновить кэш приложения.
Замечания по использованию кэша приложения
Будьте осторожны с тем, что вы кэшируете.
Когда файл кэширован, браузер будет отображать этот кэшированный файл вне зависимости от того какие изменения произошли на сервере. Чтобы убедиться, что браузер обновил кэш, необходимо изменить файл манифеста.
При этом следует помнить, что разные браузеры выделяют разное место на диске под кэшируемые файлы (некоторые браузеры ограничивают его 5Мб).
