AppCache — управляем кэшированием вплоть до полного offline!

Кэширование в браузере — совершенно необходимый в современном мире механизм, который еще менее надежен и предсказуем, чем вышеупомянутые 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 должен вызываться автоматически при перезагрузке страницы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *