"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
•
1 gefällt mir•429 views
Видео: https://youtu.be/rlcuQ_GVUjY
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie "HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
Ähnlich wie "HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25 (20)
Mehr von MoscowJS
Mehr von MoscowJS (20)
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
- 1. Cache manifest на практике Головин Дмитрий dgolovin@andiks.com 24.09.2015
- 2. 2. Пролог Cache manifest - предварительная загрузка статических ресурсов и работа в offline с возможностью отследить прогресс.
- 3. 3. Назначение ++ веб приложения “с логикой”, которые могут работать в offline + обычные веб приложения, в которых много общих статических ресурсов
- 4. 4. Пример В нашей системе надо гарантировать предварительную загрузку большого количества ресурсов на клиент. Для этого используем манифест.
- 5. 5. Что манифест не делает ● Манифест не заменяет обычную схему кэширования! ● Усложняется кэширование: надо менять манифест!
- 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. Конфигурация Offline CACHE MANIFEST ... FALLBACK: / fallback.html /imgs/ default.png Существует проблема с определением offline! # если браузер поймёт, что вы в offline # то он переадресует все запросы # к / на fallback.html # и запросы к /imgs/ на default.png
- 8. 8. Контроль cache manifest // подписка на события applicationCache. addEventListener('%event%',function(e){...} ); // отслеживание статуса switch (applicationCache. status) {...}
- 9. 9. Диаграмма нормальной работы CHECKING DOWNLOADING IDLE UPDATEREADY downloading progress cached(1) updateready(2) noupdate(2)checking
- 10. 10. Cобытие progress ● считаем статистику загруженных через e.loaded/e.total, если доступен e.lengthComputable ● или считаем количество событий - loaded, а total из содержимого манифеста (hate firefox)
- 11. 11. Успешная загрузка манифеста ● события noupdate, cached или состояние IDLE - загрузились, всё ОК! ● событие updateready или состояние UPDATEREADY ○ applicationCache.swapCache() ○ location.reload()
- 13. 13. Событие error ● событие error - произошла ошибка, обработайте и reload() ○ можно попробовать определить квоту ○ имеет смысл сохранять даты ошибок локально, чтобы при накоплении определённого максимума за период отключать манифест // но причин вы так и не узнаете
- 14. 14. События и статусы исключений ● событие obsolete и/или состояние OBSOLETE ○ неведомая ошибка “манифест удалён” (статусы: 404 и 410) Не допускайте её! Используется старый манифест. ○ alert(“manifest not found”) ● состояние UNCACHED ○ игнор, если нет html[manifest] ○ иначе обработать как error
- 15. 15. Общая диаграмма состояний CHECKING DOWNLOADING IDLE UPDATEREADY OBSOLETE UNCACHED downloading progress cached(1) updateready(2) obsolete error noupdate(2) error checking
- 16. 16. Обновление manifest online // позволяет отслеживать изменения setInterval(function() { applicationCache.update(); }, 60*60*1000);
- 17. 17. О подписке на события Firefox: ● подписка только через addEventListener ● иногда события теряются, надо следить за состоянием Chrome: ● иногда виснет в состоянии CHECKING, надо расценивать как error
- 18. 18. Меры предосторожности ● не плодите манифесты, иначе они выжрут всю квоту/место на диске ● аккуратнее с бизнес логикой (chrome запрашивает старую страницу-источник) ● статика из CACHE: обновляется только при изменении самого манифеста
- 19. 19. Отладка и управление ● console.log =) ● Chrome ○ chrome://appcache-internals/ ○ Dev. tools -> Resources -> Application Cache ● Firefox ○ Preferences -> Advanced ->Offline...
- 20. 20. Итог ● хорошая оптимизация предзагрузки ● незаменим для оффлайн приложений ● усложнение кеширования и поддержки
- 21. Всем спасибо. С вами была компания Andiks LTD Вы можете связаться с нами: info@andiks.com У нас есть открытые вакансии: ● Java developer ● WebGL developer ● Front-end developer ● Game designer ● UI/UX designer ● Functional analyst Присылайте ваши резюме.