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