HTML5 - манифест кеша отлично работает на Chrome, но не на Firefox и Opera - PullRequest
22 голосов
/ 29 ноября 2011

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

Все отлично работает в Chrome (15.0.874.106), но не работает в Firefox (7.0).1) и Opera (11.52).

Это мой файл манифеста кеша cache.manifest.php (я сократил его до минимума):

<?php 
    header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
    header('Content-type: text/cache-manifest');
?>CACHE MANIFEST

CACHE:

/app/common/css/reset.css
/favicon.ico

И это первые 4 строки«основного» HTML-документа:

<!DOCTYPE html> 
<html manifest="/app/mobile/cache.manifest.php"> 
    <head> 
    <title>MyApp Mobile</title> 

Когда я пытаюсь загрузить манифест кэша (http://www.myapp.com/app/mobile/cache.manifest.php) в браузер, файл отображается правильно, но при попытке загрузить страницу в автономном режиме, я получаюСтраница ошибки «Невозможно подключиться». Опять же, это происходит только в Firefox и Opera.

Firebug говорит: «0 items in offline cache», и я не нашел способа проверить кэш приложения на DragonFly.

Я злюсь и не знаю, как эффективно отладить проблему в Firefox и Opera. Пожалуйста, помогите.

Спасибо, Дэн

Ответы [ 13 ]

15 голосов
/ 04 декабря 2011

По моему опыту использования HTML5 AppCache, замечательно, когда вы его заработаете, но очень хрупко. Если с ним что-то не так, браузер игнорирует весь файл и, к сожалению, вместо того, чтобы использовать обычный кеш браузера, перезагружает все с нуля с сервера.

Хуже того, браузеры не будут повторно загружать файл манифеста , если его текстовое содержимое не изменится. Таким образом, вы можете настроить заголовки вашего сервера или что-то исправить, но если содержимое cache.manifest.php не изменится , браузер будет слепо игнорировать его и делать точно так же, как в прошлый раз . Так что он мог быть сломан, тогда вы исправили это, но браузеры игнорируют изменения, потому что текстовое содержимое cache.manifest.php не изменилось. Это даже кажется невосприимчивым к очистке кэша вашего браузера, что является частью того, что делает его таким запутанным - кэш приложений действительно очень серьезно относится к кешированию.

Чтобы обойти это, текстовые изменения в подсчете комментариев, поэтому поместите комментарий вверху с версией, отметкой времени или датой (например, # Version 1.2) и измените это, если вы хотите, чтобы браузер «заметил».

Тогда , браузер все равно не сразу его использует! Кэш приложения работает так, что при следующей загрузке страницы он будет делать точно так же, как в прошлый раз , и снова начнет проверять наличие обновлений в фоновом режиме. Таким образом, вы, вероятно, хотите, чтобы консоль открылась, подождите что-то вроде «обновление ...», затем «завершение», , затем нажмите «Обновить», и браузер, наконец, начнет использовать новую версию. Наконец-то!

В целом, это может быть правильная боль, чтобы работать. Однако, как только он работает, он почти пуленепробиваемый: вы можете быть уверены, что все, что перечислено в манифесте кэша, загружается только один раз , когда-либо , за все время, на пользователя, изменить текстовое содержимое файла.

В настоящее время соответствие стандартам браузеров довольно хорошее, поэтому я думаю, что у вас на самом деле он работает, но вы последний раз проверили Chrome, и это единственный браузер, который правильно кэшировал файл манифеста. Возможно, во время разработки он сломался, но Firefox и Opera сжимают старые файлы манифеста до смерти. Могу поспорить, что вы также пытались очистить кэш браузера в Firefox и Opera, что, вероятно, ничего не сделало - вам нужно изменить текстовое содержимое файла и дважды обновить его, прежде чем Firefox и Opera, наконец, откажутся от своих испорченных версий файла манифеста и начните использовать тот, который работает, который вы, вероятно, загрузили давным-давно.

9 голосов
/ 23 января 2013

От: http://appcache.offline.technology

В Firefox любые ресурсы, обслуживаемые с помощью Cache-control: no-store, не будут кэшироваться, даже если они явно включены в манифест.

Мой php по умолчанию отправляет:

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

Достаточно добавить:

header("Cache-Control: no-cache, must-revalidate");

В php-файл, чтобы он начал его кэшировать.

(Это похоже на ответ Микала Хэкмана, но немного более конкретно).

3 голосов
/ 09 декабря 2011

Проверьте ваш кеш в about:cache. Могу поспорить, вы увидите «размер данных 0 байтов» для ваших файлов PHP.

Проверьте ваши кеширующие заголовки, я обнаружил в Firefox по умолчанию «no-cache» в моих файлах php. Я просто добавил:

header("Pragma: public");
header("Cache-Control: public, max-age=6000");

к моему файлу PHP и перезагрузил автономный кеш, и он наконец работает.

НТН

3 голосов
/ 05 декабря 2011

Вы можете проверить текущее состояние кэша приложения, используя window.applicationCache.status, который возвращает числовое значение, сопоставленное со следующими состояниями: 0 - uncached, 1 - idle, 2 - checking, 3 - downloading, 4 - updateready, 5 - obsolete.

API кеша приложений имеет несколько вещей, на которые стоит обратить внимание: window.applicationCache.update(): Это запустит процесс загрузки кэша приложения, который почти совпадает с перезагрузкой страницы. Он просто проверяет, изменился ли манифест, и, если это так, загружает свежую версию всего содержимого в кеш (с учетом любых заголовков кеша). Обратите внимание, что даже при том, что новый кэш создан с этим, страница продолжит использовать старый кеш. Чтобы страница использовала только что загруженный кэш, вы должны использовать функцию swapCache().

window.applicationCache.swapCache(): эта функция сообщает браузеру, чтобы он начал использовать новые данные кэша, если они доступны. Важно отметить, что даже если существует новый файл манифеста, приложение все равно будет продолжать использовать старый кэш (как указано в старом файле манифеста) до тех пор, пока не будет вызван swapCache(). После вызова swapCache() кеш будет использоваться, как указано в новом файле манифеста.

от: http://dev.opera.com/articles/view/offline-applications-html5-appcache/

3 голосов
/ 04 декабря 2011

Мне кажется, что ваш манифест кеша выглядит немного «необычно» ... это может помочь добавить секцию FALLBACK ... другой момент заключается в том, что appcache может помешать «нормальному кешу браузера», т.е. если манифест кеша Для изменения необходимо убедиться, что браузер перезагружает его, в идеале это достигается путем изменения имени (например, с помощью номера версии, метки времени ... как части имени).

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

Подробную информацию, включая код JS и подробное описание, см.

При необходимости возвращайтесь с конкретными вопросами.

UPDATE

Согласно комментариям, предоставленным OP , показывает хорошую реализацию JS API для проверки / отладки кэша приложений, как описано в ссылках выше.

2 голосов
/ 21 мая 2014

Для Firefox, попробуйте этот маленький трюк:

<html manifest="/app/mobile/cache.manifest.php?1"> 

Это «? 1», который наконец заставляет Firefox проверять наличие последнего файла.Вот что все-таки помогло мне.Надеюсь, это поможет.

2 голосов
/ 06 декабря 2011

Попробуйте удалить:

header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");

, чтобы отправлять только заголовок Content-type:

<?php header('Content-type: text/cache-manifest'); ?>

ApplicationCache принудительно кэширует (упрощает, но ненамного)Эти первые три заголовка являются способами предотвращения кэширования.

Похоже, что Opera предотвращает кеширование при наличии этих заголовков.Средства отладки в Firefox немного отстойны, когда дело доходит до отладки AppCache, но, вероятно, стоит предположить, что это тоже исправит это.

1 голос
/ 09 апреля 2014

У меня была похожая проблема. Я очень поздно отвечаю, но это может быть полезно для других. Убедитесь, что вы не столкнетесь с проблемами, описанными AshleysBrian в его ответе. Добавление к этому

  1. Убедитесь, что файл манифеста используется как тип "text / cache-manifest"
  2. Не испытывайте это в режиме приватного просмотра в Firefox / IE. Работает только в обычном режиме просмотра. Но он работает в обоих режимах в Chrome
  3. В автономном режиме простое изменение URL может быть проблемой

    Eg: http://localhost:8080/app doesn't work on Firefox/IE
    but http://localhost:8080/app/ works in Firefox/IE 
    

    Они оба работают в Chrome

  4. Используйте эти удобные средства просмотра ресурсов для получения более подробной перспективы

    about:cache - Firefox
    chrome://appcache-internals/ - Chrome
    Pls fill in if someone knows what is it for IE
    
1 голос
/ 10 декабря 2011

Из моего опыта с созданием сайта, работающего в автономном режиме на iPad:

  • Имя файла должно заканчиваться .manifest
  • Тип MIME должен быть text/cache-manifest
  • Наличие версии в комментариях к вашему манифесту
  • Создание некоторых функций javascript с использованием window.applicationCache..., чтобы проверить, видит ли браузер изменение в манифесте, и перезагрузка содержимого, а также захватстатусные события и их отображение где-то

Смотри также: http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1

0 голосов
/ 27 марта 2015

Мой единственный способ заставить манифест работать везде - это сделать:

CACHE MANIFEST
# version x.x
# 2015-03-27

# list everything

Если я использую NETWORK и / или FALLBACK, это не сработает (в Chrome).

...