"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
1 like433 views
Документ описывает практическое применение кэш-манифеста для предварительной загрузки статических ресурсов и работы в оффлайн-режиме. Он подробно обсуждает назначение манифеста, его конфигурацию, контроль событий и исключения, а также меры предосторожности при использовании. В конечном счете, кэш-манифест является важным инструментом для оптимизации работы веб-приложений в оффлайне, несмотря на усложнение кэширования.
![14. События и статусы исключений
● событие obsolete и/или состояние
OBSOLETE
○ неведомая ошибка “манифест удалён”
(статусы: 404 и 410) Не допускайте её!
Используется старый манифест.
○ alert(“manifest not found”)
● состояние UNCACHED
○ игнор, если нет html[manifest]
○ иначе обработать как error](https://image.slidesharecdn.com/moscowjs25-html5-cache-manifest-in-practice-151013191816-lva1-app6892/85/HTML5-Cache-Manifest-MoscowJS-25-14-320.jpg)
"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 Присылайте ваши резюме.