Доступ к некэшированным файлам с помощью AppCache HTML5?

Я пытался понять новый AppCache HTML5, но я чувствую себя здесь крайне ограниченным.

Предположим, что у меня есть веб-сайт с четырьмя страницами:

index.html
about.html
portfolio.html
contact.html

У меня есть вышеуказанные ресурсы, указанные в манифесте, вместе со всеми ресурсами веб-сайта. Манифест выглядит следующим образом:

CACHE MANIFEST
# 2013-05-23 2:33 PM

# Master Manifest
index.html
about.html
portfolio.html
contact.html
styles/reset.css
styles/styles.css

NETWORK:
*

Я добавил тип файла appcache в конфигурацию сервера и использовал правильный атрибут тега HTML на каждой странице, указанной выше. Для справки, элемент выглядит так:

<html lang="en" manifest="example.appcache">

Я проверил эту настройку на своем мобильном устройстве, и все работает отлично... Если только я не загружаю каждую страницу. Кажется, что мне нужно перейти на каждую страницу и кэшировать ее через свой мобильный браузер, после чего я могу отключить ДАННЫЕ и выйти в автономный режим, чтобы мое устройство могло просматривать веб-сайт APPCACHE.

Но вот мой вопрос: как мне настроить AppCache, чтобы я мог перейти к index.html, кэшировать эту страницу и кэшировать остальные ресурсы в манифесте? Без необходимости посещения и ручного кэширования каждого ресурса?

Если вы не можете, то я должен спросить; разве это не противоречит идее, стоящей за AppCache и доступностью в автономном режиме?

Всем огромное спасибо за помощь! :)


html offline browser-cache html5-appcache
person Aaron Brewer    schedule 23.05.2013    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Вам не нужно посещать каждую страницу. Я знаю, вы упомянули, что установили тип MIME в Apache, но вы на 100% уверены, что он работает правильно?

Вы можете проверить это, открыв свой манифест в браузере и проверив заголовки ответов на вкладке «Сеть» в Chrome Web Inspectors:

cache-manifest MIME type

Content-Type должно быть text/cache-manifest

Немного сложно отлаживать без доступа к вашему сайту, но вот несколько инструкций о том, как интерпретировать то, что происходит в веб-инспекторе Chrome с AppCache, чтобы помочь вам самостоятельно отладить проблему:

На вкладке «Ресурсы» вы увидите содержимое и состояние кэша приложений. Это выглядит так, пока он загружает файлы:

введите здесь описание изображения

Консоль также будет регистрировать события при загрузке:

Application Cache Progress event (0 of 48) http://cachedfile.url

После завершения загрузки он будет выглядеть так и покажет вам список кэшированных файлов:

введите здесь описание изображения

Когда вы вернетесь, он зарегистрирует три события (при условии, что изменений нет):

Document was loaded from Application Cache with manifest http://manifest.url

Application Cache Checking event

Application Cache NoUpdate event

И затем, когда вы не в сети, это выглядит так:

введите здесь описание изображения

Надеюсь, между консолью и таблицей кэша приложений вы сможете понять, что происходит.

person adnrw    schedule 31.05.2013
comment
Я определенно понимаю, о чем вы говорите, но я даже не вижу Content-Type в своих заголовках ответов. Вот веб-сайт: iamaaron.com/appcache. - person Aaron Brewer; 18.06.2013
comment
Я ответил ниже выводом моей консоли с вашего сайта. - person adnrw; 18.06.2013

arrow_upward
2
arrow_downward

Файл манифеста правильный, и вам не нужно посещать каждую страницу, чтобы попасть в кеш на вашем мобильном телефоне. Вы можете попробовать, если это проблема с вашим мобильным телефоном или браузером, и если вы определили тип MIME text/cache-manifest на своем сервере.

person PoseLab    schedule 29.05.2013
comment
Я определил тип MIME на Apache. Там нет проблем. - person Aaron Brewer; 29.05.2013

arrow_upward
2
arrow_downward

Appcache будет хранить кеш только при первой загрузке. Это просто список файлов, в котором говорится, что при первой загрузке кэшируйте его.

Что вы могли бы сделать, так это после загрузки в фоновом режиме выполнить вызов ajax для загрузки каждого из предполагаемых ресурсов, но это не особенно красиво.

Так что мне кажется, что он действует так, как должен быть.

КЭШ:

Это раздел по умолчанию для записей. Файлы, перечисленные под этим заголовком (или сразу после CACHE MANIFEST), будут явно кэшированы после их первой загрузки. http://www.html5rocks.com/en/tutorials/appcache/beginner/< /а>

Ахмед

person user3378858    schedule 04.03.2014
comment
Хороший ответ. Добро пожаловать в Stackoverflow! - person ChicagoRedSox; 04.03.2014

arrow_upward
1
arrow_downward

При посещении вашего сайта получаю следующее:

Создание кэша приложения с манифестом http://www.iamaaron.com/appcache/example.appcache

Событие проверки кэша приложений

Событие загрузки кэша приложения

Событие выполнения кэша приложения (0 из 6) http://www.iamaaron.com/appcache/styles/reset.css

Событие выполнения кэша приложения (1 из 6) http://www.iamaaron.com/appcache/index.html

Событие Application Cache Progress (2 из 6) http://www.iamaaron.com/appcache/contact.html

Событие Application Cache Progress (3 из 6) http://www.iamaaron.com/appcache/attendees.html

Событие Application Cache Progress (4 из 6) http://www.iamaaron.com/appcache/events.html

Событие Application Cache Progress (5 из 6) http://www.iamaaron.com/appcache/styles/styles.css

Событие «Ошибка кэша приложения»: не удалось получить ресурс (404) http://www.iamaaron.com/appcache/styles/styles.css

Итак, похоже, что он работает правильно, несмотря на то, что Content-Type пуст, за исключением файла CSS, который, похоже, отсутствует (URL-адрес неверен, судя по всему, это должен быть main.css).

НО мои инструменты разработчика не показывают, что кеш приложения заполняется, и он не работает в автономном режиме.

Попробуйте исправить ошибку 404 с помощью CSS и убедитесь, что ваш apache настроен правильно, чтобы возвращать правильный Content-Type, я думаю, что это вызывает проблемы.

person adnrw    schedule 18.06.2013