Обновление кэша

Обновление кэша.

Пока что мы узнали только, как создать кэш для нашего приложения, как сообщить браузеру о том, что доступно обновление, и как контролировать процесс обновления, когда пользователь запускает приложение. Это полезно, однако непонятно для пользователя. Кэш и его обновления загружаются сразу же после того, как пользователь открывает приложение, что может вызвать задержки и прочие неприятности при старте. Рассматриваемый API решает эту проблему, предоставляя новые методы для обновления кэша в процессе работы приложения:

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

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

Для обновления кэша достаточно вызывать метод update(). События updateready и noupdate позволяют проверить результат процесса. В следующем примере мы будем использовать новый HTML-документ с двумя кнопками. Одна позволяет запросить обновление, а вторая — проверить код в кэше.

Листинг 16.10. HTML-документ для тестирования метода update()

<!DOCTYPE html>

<html lang=»ru» manifest=»mycache. manifest»>

<head>

<title>API автономной работы</title>

<link rel=»stylesheet» href=»cache. css»>

<script src=»cache. js»></script>

</head>

<body>

<section id=»databox»>

Автономное приложение </section>

<button id=»update»>Обновить кэш</button>

<button id=»test»>Тест</button>

</body>

</html>

В коде JavaScript реализованы техники, с которыми вы уже знакомы; мы всего лишь добавили две новые функции для поддержки кнопок.

Function initiate(){

Databox=document. getElementById(‘databox’); var update=document. getElementById(‘update’); update. addEventListener(‘click’, updatecache, false); var test=document. getElementById(‘test’); test. addEventListener(‘click’, testcache, false);

Cache=window. applicationCache;

Cache. addEventListener(‘updateready’, function(){ show(1); }, false);

Cache. addEventListener(‘noupdate’, function(){ show(2); }, false);

}

Function updatecache(){ cache. update();

}

Function testcache(){

Databox. innerHTML+=’<br>поменяйте это сообщение’;

}

Function show(value){ switch(value){ case 1:

Databox. innerHTML+^^^Обновление выполнено; break; case 2:

Databox. innerHTML+=’<br>Обновления отсутствуют’; break;

}

}

Window. addEventListener(‘load’, initiate, false);

В функции initiate() мы добавляем для обеих кнопок прослушиватель события click. При щелчке на кнопке update происходит вызов функции updatecache(), в которой выполняется метод update(). Если пользователь щелкает на кнопке test, то вызывается функция testcache(), которая выводит в элементе databox новый текст. Вы можете затем изменить этот текст, чтобы создать новую версию кода и проверить, обновился он или нет.

Создайте новый HTML-документ с кодом из листинга 16.10. Файл манифеста и CSS-файл те же, которые вы использовали в предыдущих примерах (если только вы не меняли имена файлов — в этом случае нужно обновить список файлов в манифесте). Скопируйте код из листинга 16.11 в файл с именем cache. js и загрузите все эти файлы на свой сервер. Откройте главный документ в браузере и протестируйте приложение.

После завершения загрузки HTML-документа вы видите в окне привычный уже элемент databox и две кнопки под ним. Как уже говорилось, событие click для кнопки Обновить кэш вызывает функцию updatecache(). Когда пользователь щелкает на этой кнопке, внутри функции выполняется метод update() и запускается процесс обновления кэша. Браузер загружает файл манифеста и сравнивает его с аналогичным файлом в кэше. Если файл изменился, то происходит повторная загрузка всех перечисленных в манифесте файлов. По завершении процесса срабатывает событие updateready. Оно вызывает функцию show() со значением

1, которое соответствует сообщению «Обновление выполнено». Но если файл манифеста не менялся, то обновления не происходит и срабатывает событие noupdate. Это событие вызывает функцию show() со значением

2, и внутри элемента databox выводится сообщение «Обновления отсутствуют».

Для того чтобы проверить, как этот код работает, отредактируйте файл манифеста или добавьте в него комментарии. После изменения манифеста запросите обновление кэша, щелкнув на соответствующей кнопке. В поле databox появится сообщение «Обновление выполнено». Кроме того, попробуйте поиграть с текстом в функции testcache(), чтобы определить момент, когда обновление выполняется.

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

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

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