Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cache manifest
на практике
Головин Дмитрий
dgolovin@andiks.com
24.09.2015
2. Пролог
Cache manifest - предварительная
загрузка статических ресурсов и
работа в offline с возможностью
отследить прогр...
3. Назначение
++ веб приложения “с логикой”,
которые могут работать в offline
+ обычные веб приложения, в
которых много об...
4. Пример
В нашей системе надо гарантировать
предварительную загрузку большого
количества ресурсов на клиент. Для этого
ис...
5. Что манифест не делает
● Манифест не заменяет обычную схему
кэширования!
● Усложняется кэширование: надо менять
манифес...
6. Базовая конфигурация
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
CACHE MANIFEST
CACHE:
file1.js
file2.cs...
7. Конфигурация Offline
CACHE MANIFEST
...
FALLBACK:
/ fallback.html
/imgs/ default.png
Существует проблема с определением...
8. Контроль cache manifest
// подписка на события
applicationCache. addEventListener('%event%',function(e){...} );
// отсл...
9. Диаграмма нормальной работы
CHECKING
DOWNLOADING
IDLE
UPDATEREADY
downloading
progress
cached(1)
updateready(2)
noupdat...
10. Cобытие progress
● считаем статистику загруженных через
e.loaded/e.total, если доступен
e.lengthComputable
● или счита...
11. Успешная загрузка манифеста
● события noupdate, cached или
состояние IDLE - загрузились, всё ОК!
● событие updateready...
12. Диаграмма исключений
CHECKING
DOWNLOADING
OBSOLETE
UNCACHED
obsolete
errorerror
13. Событие error
● событие error - произошла ошибка,
обработайте и reload()
○ можно попробовать определить квоту
○ имеет ...
14. События и статусы исключений
● событие obsolete и/или состояние
OBSOLETE
○ неведомая ошибка “манифест удалён”
(статусы...
15. Общая диаграмма состояний
CHECKING DOWNLOADING
IDLE
UPDATEREADY
OBSOLETE
UNCACHED
downloading
progress cached(1)
updat...
16. Обновление manifest online
// позволяет отслеживать изменения
setInterval(function() {
applicationCache.update();
}, 6...
17. О подписке на события
Firefox:
● подписка только через
addEventListener
● иногда события теряются, надо следить
за сос...
18. Меры предосторожности
● не плодите манифесты, иначе они выжрут
всю квоту/место на диске
● аккуратнее с бизнес логикой ...
19. Отладка и управление
● console.log =)
● Chrome
○ chrome://appcache-internals/
○ Dev. tools -> Resources -> Application...
20. Итог
● хорошая оптимизация предзагрузки
● незаменим для оффлайн приложений
● усложнение кеширования и поддержки
Всем спасибо.
С вами была компания Andiks LTD
Вы можете связаться с нами:
info@andiks.com
У нас есть открытые вакансии:
● ...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Актуальные технологии и тренды в веб-разработке
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25

Download to read offline

Видео: https://youtu.be/rlcuQ_GVUjY

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25

  1. 1. Cache manifest на практике Головин Дмитрий dgolovin@andiks.com 24.09.2015
  2. 2. 2. Пролог Cache manifest - предварительная загрузка статических ресурсов и работа в offline с возможностью отследить прогресс.
  3. 3. 3. Назначение ++ веб приложения “с логикой”, которые могут работать в offline + обычные веб приложения, в которых много общих статических ресурсов
  4. 4. 4. Пример В нашей системе надо гарантировать предварительную загрузку большого количества ресурсов на клиент. Для этого используем манифест.
  5. 5. 5. Что манифест не делает ● Манифест не заменяет обычную схему кэширования! ● Усложняется кэширование: надо менять манифест!
  6. 6. 6. Базовая конфигурация <!DOCTYPE html> <html lang="en" manifest="cache.manifest"> CACHE MANIFEST CACHE: file1.js file2.css NETWORK: http://* https://* * SETTINGS: # fast prefer-online # hash # file : cache.manifect # Content-Type: text/cache-manifest
  7. 7. 7. Конфигурация Offline CACHE MANIFEST ... FALLBACK: / fallback.html /imgs/ default.png Существует проблема с определением offline! # если браузер поймёт, что вы в offline # то он переадресует все запросы # к / на fallback.html # и запросы к /imgs/ на default.png
  8. 8. 8. Контроль cache manifest // подписка на события applicationCache. addEventListener('%event%',function(e){...} ); // отслеживание статуса switch (applicationCache. status) {...}
  9. 9. 9. Диаграмма нормальной работы CHECKING DOWNLOADING IDLE UPDATEREADY downloading progress cached(1) updateready(2) noupdate(2)checking
  10. 10. 10. Cобытие progress ● считаем статистику загруженных через e.loaded/e.total, если доступен e.lengthComputable ● или считаем количество событий - loaded, а total из содержимого манифеста (hate firefox)
  11. 11. 11. Успешная загрузка манифеста ● события noupdate, cached или состояние IDLE - загрузились, всё ОК! ● событие updateready или состояние UPDATEREADY ○ applicationCache.swapCache() ○ location.reload()
  12. 12. 12. Диаграмма исключений CHECKING DOWNLOADING OBSOLETE UNCACHED obsolete errorerror
  13. 13. 13. Событие error ● событие error - произошла ошибка, обработайте и reload() ○ можно попробовать определить квоту ○ имеет смысл сохранять даты ошибок локально, чтобы при накоплении определённого максимума за период отключать манифест // но причин вы так и не узнаете
  14. 14. 14. События и статусы исключений ● событие obsolete и/или состояние OBSOLETE ○ неведомая ошибка “манифест удалён” (статусы: 404 и 410) Не допускайте её! Используется старый манифест. ○ alert(“manifest not found”) ● состояние UNCACHED ○ игнор, если нет html[manifest] ○ иначе обработать как error
  15. 15. 15. Общая диаграмма состояний CHECKING DOWNLOADING IDLE UPDATEREADY OBSOLETE UNCACHED downloading progress cached(1) updateready(2) obsolete error noupdate(2) error checking
  16. 16. 16. Обновление manifest online // позволяет отслеживать изменения setInterval(function() { applicationCache.update(); }, 60*60*1000);
  17. 17. 17. О подписке на события Firefox: ● подписка только через addEventListener ● иногда события теряются, надо следить за состоянием Chrome: ● иногда виснет в состоянии CHECKING, надо расценивать как error
  18. 18. 18. Меры предосторожности ● не плодите манифесты, иначе они выжрут всю квоту/место на диске ● аккуратнее с бизнес логикой (chrome запрашивает старую страницу-источник) ● статика из CACHE: обновляется только при изменении самого манифеста
  19. 19. 19. Отладка и управление ● console.log =) ● Chrome ○ chrome://appcache-internals/ ○ Dev. tools -> Resources -> Application Cache ● Firefox ○ Preferences -> Advanced ->Offline...
  20. 20. 20. Итог ● хорошая оптимизация предзагрузки ● незаменим для оффлайн приложений ● усложнение кеширования и поддержки
  21. 21. Всем спасибо. С вами была компания Andiks LTD Вы можете связаться с нами: info@andiks.com У нас есть открытые вакансии: ● Java developer ● WebGL developer ● Front-end developer ● Game designer ● UI/UX designer ● Functional analyst Присылайте ваши резюме.
  • xermit

    Oct. 27, 2015

Видео: https://youtu.be/rlcuQ_GVUjY

Views

Total views

417

On Slideshare

0

From embeds

0

Number of embeds

22

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×