Кэширование доступно в двух вариантах: кэширование данных и кэширование приложений.
В HTML5 кэширование данных может осуществляться с помощью веб-хранилища , indexedDB и т. Д.
Кэширование приложения позволяет веб-приложению хранить свои ресурсы, такие как HTML, CSS, изображения, страницы JavaScript и т. Д., В браузере, что позволяет сделать приложение полностью или частично доступным в автономном режиме или при недоступности подключения к Интернету.
Файл манифеста
Кэширование приложения может быть выполнено с помощью файла манифеста кэша. Файл манифеста определяет список ресурсов, которые должны быть кэшированы в браузере.
Разделы в файле манифеста
CACHE MANIFEST: первая строка файла манифеста должна начинаться с ключевого слова CACHE MANIFEST.
CACHE MANIFEST
# 2010-02-08:v2
index.html
images/profile.JPG
css/main.cssСписок ресурсов, подлежащих кэшированию, должен быть указан под разделом CACHE MANIFEST.
Не забудьте кэшировать изображения и файлы CSS, связанные с определенной веб-страницей.
В приведенном выше примере index.html, изображение профиля и файл main.css — это ресурсы, которые должны кэшироваться браузером.
Строка, начинающаяся с символа #, обозначает комментарий.
FALLBACK: этот раздел сообщает браузеру, что отображать, когда браузер пытается получить доступ к некэшированному файлу в автономном режиме.
FALLBACK
/html /offline.html
Приведенный выше пример показывает, что браузер должен отображать offline.html всякий раз, когда он пытается получить доступ к некэшированным файлам в папке html во время автономного режима.
/index.html /offline.html
Указывает, что браузер должен отображать offline.html вместо index.html в автономном режиме, если index.html не кэшируется
/ /offline.html
Указывает, что всякий раз, когда пользователь находится в автономном режиме, все некэшированные файлы в корневой папке будут заменены на offline.html.
СЕТЬ: Ресурсы, доступ к которым возможен только в режиме онлайн и которые никогда не должны кэшироваться, перечислены в этом разделе.
NETWORK
/sample.php
В приведенном выше примере указано, что sample.php доступен только во время онлайн
NETWORK
*
Звездочка в разделе сети указывает, что все ресурсы, кроме тех, которые упомянуты в разделе CACHE MANIFEST, доступны только в режиме онлайн.
Образец файла
CACHE MANIFEST
# 2010-02-08:v12
CACHE:
index.html
images/IMG_1713.JPG
css/main.css
# Require the user to be online.
NETWORK:
*
# offline.html will be served in place of all other .html files
FALLBACK:
/index.html /offline.html
Ссылка на файл манифеста
Как только файл манифеста подготовлен, на него следует ссылаться с веб-страницы, которую вы хотите кэшировать, используя атрибут manifest в теге html, как указано ниже.
<!DOCTYPE html>
<html manifest="developer.appcache">
Page to be cached goes here
</html>
Страница, на которую делается ссылка, будет автоматически кэшироваться, даже если она не указана в файле манифеста.
Очистка кеша
Кэш будет оставаться неизменным до тех пор, пока не произойдет одно из следующих действий.
• Кэш браузера очищается пользователем.
• Кэшируемые ресурсы обновляются. Обратите внимание, что обновление ресурсов в файле манифеста не позволит браузеру автоматически повторно кэшировать файл. Файл манифеста должен быть изменен. Хотите знать, что изменить в файле манифеста, если нет изменений в списке ресурсов для кэширования? Просто добавьте комментарий к версии и продолжайте изменять номер версии по мере изменения ресурсов. Этого должно быть достаточно.
• Изменить в файле манифеста.
• Кэш приложения обновляется программно.
Кеш события
Доступ к кэшу приложения можно получить программным способом, используя объект окна.
Процесс, посредством которого браузер взаимодействует с файлом манифеста и создает кеш, включает в себя ряд событий кеша. Состояние кэша приложения во время процесса кэширования может отслеживаться программно с помощью свойства status объекта кэша приложения.
window.applicationCache.status.
Когда браузер впервые посещает веб-страницу, содержащую атрибут manifest, происходят следующие события.
• Проверка: происходит, когда браузер посещает веб-страницу и читает атрибут манифеста на элемент.
• Загрузка: происходит, когда браузер начинает загрузку ресурсов в файле манифеста.
• Ход выполнения. Предоставляет информацию о том, сколько файлов загружено и сколько файлов еще не загружено.
• Кэшируется: происходит, когда все ресурсы в файле манифеста загружены и приложение готово к использованию в автономном режиме.
Если браузер уже посетил веб-страницу и может распознать файл манифеста, могут произойти следующие события
• Без обновления: происходит, когда нет изменений в файле манифеста.
• Загрузка: происходит при изменении файла манифеста кэша и ресурсов, перечисленных в файле. Браузер начинает загрузку ресурсов.
• Ход выполнения. Предоставляет информацию о том, сколько файлов загружено и сколько файлов еще не загружено.
• Update Ready — происходит, когда ресурсы в файле манифеста снова загружаются для изменений, а новое приложение готово для использования в автономном режиме.
Событие ошибки происходит в следующих сценариях
• Файл манифеста был размером 404 или 410 страниц, поэтому кэширование прекращено
• Файл манифеста кэша изменяется во время выполнения обновления.
• Произошла ошибка при загрузке ресурсов, перечисленных в файле манифеста.
• Файл манифеста не изменился, но страница, ссылающаяся на манифест, не была загружена должным образом
Если файл манифеста приложения удаляется с сервера, браузер удаляет все кэшированные ресурсы, которые используют этот манифест, и отправляет «устаревшее» событие объекту applicationCache.
Обновление кэша:
Вы можете программно проверить, есть ли у приложения обновленный файл манифеста кэша, прослушивая событие updateready объекта кэша приложения. Когда кэш приложения находится в состоянии updatedready, используйте функцию кэш-памяти подкачки для замены старого файла манифеста на новый и перезагрузите окно, чтобы перезагрузить ресурсы, которые были изменены в файле манифеста.
function onUpdateReady() {
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
location.reload();
}
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
Вывод:
Функция кэширования приложений раскрыла реальный потенциал HTML5, предоставляя возможность просмотра в автономном режиме, ускорения извлечения ресурсов, хранящихся в кэше, и снижения нагрузки на сервер.