Как использовать/создавать MANIFEST, обрабатывать события/ошибки appCache и использовать swapCache

Как вы используете и создаете файл (структуру) MANIFEST,

обрабатывать события и ошибки 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" просто говорит "im done", кешируя файлы, и все пошло так, как должно.

Что это значит? Это означает, что мы можем иметь некоторый контроль над событиями и можем инициировать наши собственные события, если вы любите.

Итак, прослушивая событие 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 - (Only) Запускается при первом кэшировании ресурсов, указанных в манифесте.

noupdate - запускается, если в манифест не было внесено изменений с момента последнего обновления кеша.

updateready - запускается, если загружаются новые ресурсы.

Обработка сценария (ошибки, события и триггеры)

Что, если что-то пойдет не так? Мы можем обрабатывать это с помощью error и/или obsolete.

error запускается, когда что-то происходит неточно при обновлении.

например.

  • Файл, указанный в манифесте, не существует на сервере.
  • При загрузке изменяется манифест.

obsolete запускается, когда файл манифеста не существует (на сервере).

например.

  • Файл манифеста удаляется с сервера.
  • На веб-сайте указывается неверный 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 полезен, основной причиной его использования было бы обеспечить доступность самого доступного кеша. Altho это похоже на вещь, которая должна работать сама по себе, что не всегда так. Например, некоторые браузеры не всегда используют последний кеш, поскольку не получили сообщение, которое ему нужно (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 - пример приложения.

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.