Как да използвате/създадете МАНИФЕСТ, да обработвате събития/грешки в appCache и използването на swapCache

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

обработва събития и грешки на appCache,

и кога е необходим swapCache?


javascript events cache-manifest application-cache html5-appcache
person Aleksander Azizi    schedule 18.11.2013    source източник

Отговори (1)


arrow_upward
45
arrow_downward

Използвайте кеша на приложението с манифеста

За да използвате кеша на приложението, трябва да препратите към файла на манифеста в 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 с анонимна-функция. В рамките на тази функция предавам „събитие“ от това, което слушаме (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
comment
Ако това беше първият ресурс, който прочетох, когато проучвах използването на манифестния файл, щеше да ми спести часове работа. Страхотно и точно резюме! - person Aries51; 09.10.2015