Кэширование в браузере — совершенно необходимый в современном мире механизм, который еще менее надежен и предсказуем, чем вышеупомянутые HTTP cookie. HTML5 предполагает технологию кэширования ресурсов, в которой процесс целиком и полностью контролируем разработчиком. Это кэш приложений (AppCache) и API доступа к нему, позволяющий манипулировать загрузкой ресурсов и доступа к ним, в том числе в отсутствие связи с сервером.
Управление кэшированием в AppCache осуществляется посредством деклараций в файле манифеста. Это простой текстовый файл, расположенный в месте, доступном для веб-приложения. Ниже приведен пример файла манифеста:
CACHE MANIFEST CACHE:
Style/default. css
Images/sound-icon. png
Images/background. png
NETWORK:
Comm. cgi
FALLBACK:
Main_image. jpg backup_image. jpg
Все ресурсы, перечисленные в секции CACHE, всегда, кроме случаев начальной загрузки или перезагрузки вследствие изменения манифеста, будут загружаться не из сети, а с локального AppCache. Секция NETWORK, напротив, предполагает загрузку только с вебсервера. Запись в секции FALLBACK означает, что при отсутствии доступа к серверу вместо ресурса main_image. jpg будет загружен сохраненный в AppCache файл backup_image. jpg.
Как видите, все довольно просто.
При использовании AppCache надо четко представлять, что этот механизм и обычный кэш браузера существуют независимо друг от друга. В частности, это означает, что данные, не упомянутые в манифесте, вполне могут сохраниться в кэше браузера.
Связать манифест с HTML-документом можно, указав файл манифеста в качестве атрибута тега <html>:
<html manifest="main. manifest">
Кроме того, необходимо сообщить веб-серверу правильный MIME-тип для манифеста. Например, для Apache это можно сделать, добавив в файл. htacces строчку:
AddType text/cache-manifest. manifest
При изменении файла манифеста данные в AppCache целиком обновляются (загружаются заново).
Для динамического управления процессом кэширования введен новый DOM-объект — window. applicationCache. Основное его свойство — applicationCache. status, и в процессе работы веб-приложения оно может принимать следующие значения:
0 — uncached (страница не имеет записей в кэше приложений. Этот статус будет возвращен и при первой загрузке страницы);
1 — idle (нет обновленных версий, в AppCache — самая новая);
2 — checking (идет проверка наличия обновленного файла манифеста);
3 — downloading (загрузка нового кэша);
4 — updateready (обновленный кэш готов к использованию);
5 — obsolete (файл манифеста отсутствует — кэш приложений теперь признан устаревшим и подлежит удалению).
Переходу в любое из этих состояний соответствует событие объекта applicationCache, на которое возможно «навесить» обработчики (например, onupdateready, onobsolete).
ApplicationCache обладает следующими методами, позволяющими динамически обновлять кэш и контент:
— applicationCache. t pdate() — в случае изменения файла манифеста метод перезагружает кэш приложения в соответствии с новыми декларациями. При этом веб-приложение продолжает использовать старый кэш;
— applicationCache. swapCache() — сбрасывает старый кэш, заставляя приложение использовать ресурсы из AppCache, обновленного методом update();
— applicationCache. abort() — прерывает связь приложения с AppCache.
Работает все это следующим образом:
S etInterval(function () { do_update();
},
1000000
);
Function do_update() {
Cache = window. applicationCache; console. info(”Cache updating… ” + cache. status); try {
Cache. update():
If (cache. status == cache. UPDATEREADY) { cache. swapCache():
}
} catch (e) { console. error(e):
}
}
Впрочем, если страница часто перезагружается, будет достаточно следующего кода:
Window. applicationCache. addEventListener(‘updateready’, function(){
Window. applicationCache. swapCache():
}, false
);
AplicationCache. update должен вызываться автоматически при перезагрузке страницы.
Добавить комментарий