Как вы используете и создаете файл МАНИФЕСТА (структура),
обрабатывать события и ошибки appCache,
а когда нужен swapCache?
Как использовать/создать МАНИФЕСТ, обрабатывать события/ошибки appCache и использование swapCache
Ответы (1)
Использовать кеш приложения с манифестом
Чтобы использовать кеш приложения, вам нужно сослаться на файл манифеста внутри HTML-документа, например:
<html manifest="manifest.appcache"/>
Самому файлу манифеста для работы требуется предопределенный макет.
CACHE MANIFEST является обязательным и должен быть вверху (чтобы, когда браузер проверяет, является ли это манифестом кеша, он возвращал true).
CACHE является необязательным, но рекомендуемым и используется для ссылки на файлы, которые вы хотите кэшировать локально.
FALLBACK является необязательным и используется для указания файлов, которые следует использовать, если указанный (в CAHCE) недоступен. Первый указанный файл (в FALLBACK) — это исходный файл, а второй файл — это тот, который будет использоваться, если исходный файл недоступен.
NETWORK следует считать обязательным, но это не так. Он используется для указания, какие файлы требуют подключения к Интернету (не кэшируются). Использование * (без скобок) указывает, что для всех остальных файлов, кроме упомянутых в CACHE, требуется активное подключение к Интернету.
Пример:
CACHE MANIFEST
CACHE:
YourFirstFile.html
YourSecondFile.png
fallbackFile1.html
fallbackFile2.png
Etc.css
FALLBACK:
YourFirstFile.html fallbackFile1.html
YourSecondFile.png fallbackFile2.png
NETWORK:
*
Манифест (и указанные в нем ресурсы) проверяются только при загрузке страницы (когда пользователь заходит на сайт). Примечание: файл манифеста вводится с учетом регистра.
Обработка событий, инициированных в кеше приложения
Первое, что я хочу сказать, это то, что appCache на самом деле window.applicationCache, поэтому его нужно объявить (var appCache = window.applicationCache;).
Когда пользователь входит на сайт в первый раз (или кеш манифеста отсутствует), запускаются следующие события; если все работает как надо:
Создание кеша приложения с манифестом
Проверка кеша приложений
Загрузка кеша приложений
Ход выполнения кэша приложения (0 из X)
Кэш приложений
Давайте сломаем это.
Первый (Creating Application Cache) определяет кеш «файл/папку», который браузер будет использовать позже.
Второй (Application Cache Checking) checking просматривает файл манифеста, чтобы увидеть, что ему нужно кэшировать.
Третий (Application Cache Downloading) downloading, начинает процесс загрузки файлов, указанных в манифесте.
Четвертый (Application Cache Progress) progress отслеживает ход загрузки (запускается для каждого файла).
Пятый (Application Cache Cached) cached, просто говорит "я закончил" кеширование файлов, и все прошло как надо.
Что это значит? Это означает, что мы можем иметь некоторый контроль над событиями и можем запускать свои собственные события, если захотим.
Таким образом, прослушивая событие progress, мы можем отобразить индикатор выполнения, уведомление с шагами или вообще все, что захотим.
appCache.addEventListener("progress", function(event) {
console.log(event.loaded + " of " + event.total);
}, false);
Подожди, что я только что сделал?
Я добавил event listener с anonymous-function. В рамках этой функции я передаю «событие» из того, что мы слушаем (downloading), и просто logged сколько файлов уже кэшировано и сколько файлов в общей сложности.
Давайте сделаем это для всех упомянутых событий, от первого вызываемого события до последнего:
appCache.addEventListener("checking", function(event) {
console.log("Checking for updates.");
}, false);
appCache.addEventListener("downloading", function(event) {
console.log("Started Download.");
}, false);
appCache.addEventListener("progress", function(event) {
console.log(event.loaded + " of " + event.total + " downloaded.");
}, false);
appCache.addEventListener("cached", function(event) {
console.log("Done.");
}, false);
Теперь эти события делают то, что я хочу.
Это события appCache:
checking — всегда срабатывает первое событие. Проверяет наличие обновлений в манифесте.
downloading — срабатывает при обнаружении обновления. Загружает ресурсы, указанные в манифесте.
progress — срабатывает для каждого загружаемого в данный момент ресурса. Отслеживает прогресс (по файлам).
error — срабатывает, если возникает сетевая ошибка 404, 410 или файл манифеста был изменен во время загрузки.
obsolete — срабатывает, если возникает сетевая ошибка 404, 410 или файл манифеста не существует (на сервере). Обратите внимание, что это событие удалит предыдущий (и текущий) кеш приложения.
cached — (только) Запускается при первом кэшировании ресурсов, указанных в манифесте.
noupdate — срабатывает, если в манифест не было внесено никаких изменений с момента последнего обновления кеша.
updateready — срабатывает при загрузке новых ресурсов.
Обработка сценариев (ошибки, события и триггеры)
Что если что-то пойдет не так? Мы можем справиться с этим с помощью error и/или obsolete.
error срабатывает, когда что-то идет не так во время обновления.
e.g.
- Файл, указанный в манифесте, не существует на сервере.
- Манифест изменяется во время загрузки.
obsolete запускается, когда файл манифеста не существует (на сервере).
e.g.
- Файл манифеста удаляется с сервера.
- Веб-сайт указывает на недопустимый URL-адрес/путь (
<html manifest="manifest.appcache"/>).
Слушая error, мы можем, например, сообщить пользователю, если что-то пойдет не так:
appCache.addEventListener("error", function(event) {
if (navigator.onLine == true) { //If the user is connected to the internet.
alert("Error - Please contact the website administrator if this problem consists.");
} else {
alert("You aren't connected to the internet. Some things might not be available.");
}
}, false);
Здесь я проверил, есть ли у пользователя активное подключение к Интернету или нет. Имейте в виду, что это всего лишь пример, сообщение пользователю может не понадобиться (в зависимости от вашего веб-сайта).
Мы можем сделать то же самое с obsolete, но мы можем не захотеть сообщать об этом пользователю, так как это проблема на стороне сервера:
appCache.addEventListener("obsolete", function(event) {
console.log("Obsolete - no resources are cached, and previous cache(s) are now deleted.");
}, false);
swapCache
Теперь это сложно. Основные вопросы о swapCache: Что он делает?, Полезен ли он/нужен? и следует ли его использовать?
swapCache используется для замены старого кеша новым. Его можно использовать только внутри события updateready (при использовании в другом месте будет возвращена ошибка).
Что он делает?: swapCache делает то, что говорит, меняет текущий кеш на новый.
Это полезно / нужно?: appCache полезен, основная причина его использования - убедиться, что используется самый новый доступный кеш. Хотя это кажется вещью, которая должна работать сама по себе, это не всегда так. Например, некоторые браузеры не всегда используют последнюю версию кеша, так как не получают нужного сообщения (хорошим примером является iPhone). Изображение может быть кэшировано, затем удалено/переименовано, затем кэшировано и так далее. В конце концов, браузер может использовать старый кеш для отображения этого изображения из-за уже имеющейся у него ссылки на сохраненные кеши. Итог: это полезно? да. Это необходимо? нет.
Следует ли его использовать?: Лично я бы сказал да. Но это зависит от того, что делает ваша страница. Если критерии из приведенного выше примера соответствуют вашей обработке ресурсов, то да. Иначе это не имело бы большого значения.
поэтому, добавив прослушиватель событий в updateready, мы можем включить swapCache:
appCache.addEventListener("updateready", function(event) {
appCache.swapCache();
window.reload();
}, false);
(appCache) Переменные события:
progress.
total
loaded
lengthComputable
GENERAL (for all):
clipboardData
cancelBubble
returnValue
srcElement
defaultPrevented
timeStamp
cancelable
bubbles
eventPhase
currentTarget
target
type
stopPropagation
preventDefault
initEvent
stopImmediatePropagation
Хорошие внешние страницы:
http://www.html5rocks.com/en/tutorials/appcache/beginner/ - основы appCache.
http://www.htmlgoodies.com/html5/other/html-5-appcache-by-example.html — пример appCache.
http://www.jefclaes.be/2012/04/visualizing-offline-application-cache.html — манифест FALLBACK.
Требуется ли swapCache() в автономных приложениях HTML5? — информация о swapCache ( читайте и комментарии).
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching — общая информация о кэше HTTP.
person
Aleksander Azizi
schedule
18.11.2013
Если бы это был первый ресурс, который я прочитал при исследовании использования файла манифеста, это сэкономило бы мне часы работы. Отличный и точный конспект!
- person Aries51; 09.10.2015
