Автономное выполнение приложений Web с помощью HTML5 AppCache

Предоставление резервного контента

Раздел заголовка FALLBACK: используется для определения запасных ресурсов, которые будут использоваться вместо файлов, которые отказываются загружаться (или загружаются не полностью):

CACHE MANIFEST

CACHE:
style.css
script.js
index.htm

NETWORK:
style2.css

FALLBACK:
main_image.jpg backup_image.jpg

Предполагается, что резервный контент будет кэшироваться и будет использоваться только в том случае, когда основной контент не загружается. В приведенном выше примере файл backup_image.jpg кэшируется в AppCache, поэтому когда файл main_image.jpg не может загрузиться, на его место будет загружаться backup_image.jpg. Посмотрите пример с резервной копией манифеста (http://people.opera.com/shwetankd/demos/4/index.htm) — если перейти на эту страницу, и отсоединиться от Интернет, а затем перезагрузить страницу, браузер попытается загрузить изображение, но так как вы не в сети (и изображение не кэшировано) оно не будет загружено, и, следовательно, на его место будет загружен резервный контент. (Браузер сначала в течение некоторого времени будет пытаться загрузить основной контент, и только затем загрузит резервный контент ... так что будьте терпеливы!)

Файл манифеста, который используется в этом примере, предоставляет резервный контент для нескольких изображений (http://people.opera.com/shwetankd/demos/5/index.htm).

Использование API кэша приложений и событий для проверки, что кэш использует самые свежие файлы

Одним из больших достоинств кэша приложений является то, что теперь программист имеет доступ к тому, как себя должен вести кэш. Он имеет доступ к событиям, которые могут сообщить о текущем состоянии кэша приложений, и имеет также функции для асинхронного обновления. Например, можно использовать функцию window.applicationCache, чтобы определить, поддерживает браузер кэш приложений или нет. Давайте посмотрим на некоторые другие способы, которыми можно получить программный контроль над кэшем приложений.

Статусы

Текущий статус кэша приложений можно проверить с помощью функции window.applicationCache.status, которая возвращает числовое значение, соответствующее следующим статусам:

0 - uncached (не кэшировано)

Если страница не соединена с кэшем приложений. Также при самой первой загрузке кэша приложений и во время загрузки AppCache будет иметь статус uncached.

1 – idle (не работает)

Когда браузер имеет самую последнюю версию AppCache, и нет обновленных версий для загрузки, то статус задается как Idle.

2 – checking (проверка)

В течение времени, когда страница проверяет наличие обновленного файла манифеста, статус задается как Checking.

3 – downloading (загрузка)

В течение времени, когда страница фактически загружает новый кэш (если был обнаружен обновленный файл манифеста), статус задается как downloading

4 – updateready (обновление готово)

Когда браузер заканчивает загрузку нового кэша, он готов к использованию (но все еще не используется). В течение этого времени статус задается как updateready

5 – obsolete (устарел)

Когда файл манифеста невозможно найти, статус задается как obsolete, и кэш приложений удаляется. Важно знать, что когда файл манифеста (или любой из файлов, упомянутых в манифесте, за исключением имеющих резервные копии) отказывается загружаться, то это будет считаться ошибкой и будет продолжать использоваться старый кэш приложений.

События

В зависимости от того, что происходит с AppCache в данный момент, могут порождаться также некоторые события.

Checking (проверка)

Это событие порождается, когда браузер выполняет проверку, пытаясь загрузить манифест в первый раз, или проверяет, что имеется обновленная версия файла манифеста.

Noupdate (нет обновления)

Если на сервере отсутствует обновленная версия файла манифеста, порождается событие noupdate.

Downloading (загрузка)

Если браузер загружает кэш в первый раз, или загружает обновленную версию, порождается это событие.

Progress (успешно)

Это событие порождается для каждого файла, который загружается как часть AppCache.

Cached (кэшировано)

Это событие порождается, когда все ресурсы закончили загрузку, и приложение будет кэшировано.

Updateready (обновление готово)

Когда ресурсы закончили перезагрузку обновленного кэшированного файла, вызывается updateready. Когда это произошло, можно использовать swapCache() (как объясняется далее в статье), чтобы заставить браузер использовать этот вновь обновленный кэш.

Obsolete (устарел)

Это событие порождается, если файл манифеста невозможно найти (ошибка 404 или 410).

Error (ошибка)

Это событие может порождаться по различным причинам. Если файл манифеста невозможно найти, процесс загрузки кэша приложений должен быть прерван, и в данном случае может порождаться это событие. Оно может порождаться в случае наличия файла манифеста, но какой-нибудь из файлов, упомянутых в файле манифеста, не может быть загружен правильно. Оно может порождаться даже в случае изменений файла манифеста во время выполнения обновления (в этом случае браузер будет ждать какое-то время, прежде чем попытаться еще раз), или в любом другом случае, где возникает фатальная ошибка.

Все обработчики событий для этих событий имеют префикс 'on'. Например, onchecking, onupdateready, onerror, и т.д.

API кэша приложений имеет несколько особенностей, которые стоит упомянуть:

window.applicationCache.update(): Эта функция будет запускать процесс загрузки кэша приложений, который является почти тем же, что и перезагрузка страницы. Она просто проверяет, изменился ли манифест, и, если возможно, загружает свежую версию всего контента в кэше (учитывая все заголовки кэша). Отметим, что даже хотя при этом создается новый кэш, страница будут продолжать использовать старый кэш. Чтобы заставить страницу использовать только что загруженный новый кэш, необходимо использовать функцию swapCache().

window.applicationCache.swapCache(): Эта функция приказывает браузеру начать использовать данные нового кэша, если он доступен. Важно отметить, что даже если имеется новый файл манифеста, приложение будет по-прежнему продолжать использовать старый кэш (как определено в старом файле манифеста), пока не будет вызвана функция swapCache(). Когда вызывается swapCache(), кэш будет использоваться, как определено в новом файле манифеста.

Обычно не требуется использовать функцию update(), так как браузер должен автоматически делать это при перезагрузке страницы. Наиболее часто функцию swapCache() будет использоваться в соединении с событием onupdateready (обновление готово).

В следующем примере, если изменить файл манифеста и перезагрузить страницу, браузер загрузит новые файлы в кэш, и затем переключится на новый кэш (так как вызывается функция swapcache() ):

<html manifest="demo.manifest">
<head>
<script type="text/javascript">
window.applicationCache.addEventListener('updateready', function(){
window.applicationCache.swapCache();
}, false);
</script>
</head>
<body>
...
</body>
</html>

Если созданная страница вряд ли будет перезагружаться пользователем в течение какого-то времени, то можно было бы периодически вызывать функцию update(), чтобы проверять наличие обновлений файла манифеста, и в положительном случае вызывать функцию swapcache() на событии updateready, чтобы загрузить и переключиться на новый кэш:

setInterval(function () { window.applicationCache.update(); }, 3600000); // Проверять обновления файла манифеста каждые 60 минут. Если он обновляется, загрузить новый кэш, как определено новым файлом манифеста.

window.applicationCache.addEventListener('updateready', function(){ 
// когда обновленный кэш загрузится и будет готов для использования 
window.applicationCache.swapCache(); 
//переключитесь на самую новую версию кэша
}, false);

Этот код будет проверять наличие обновленной версии файла манифеста каждые 60 минут. Если он находит версию файла манифеста на сервере, отличную от встречавшейся ранее, он загрузит новый кэш на основе этого нового манифеста. Когда это произойдет, будет порождаться событие updateready, сообщающее, что обновленная версия кэша закончила загружаться и готова к использованию. Затем можно явно использовать функцию swapCache(), чтобы переключиться со старого кэша на новый, только что загруженный.

Таким образом можно гарантировать, что кэш пользователя будет оставаться обновленным.

Заключение

Введение кэша приложений W3C HTML5 (http://dev.w3.org/html5/spec/offline.html) предоставляет множество новых возможностей для разработчиков web. Приложения Web могут теперь кэшироваться для автономного использования, делая тем самым их еще более мощными и полезными чем раньше.