Кэш HTML5 проявляет странную ошибку с большим количеством контента

Я медленно, но верно схожу с ума от веб-хранилища HTML5 и кеша приложений.

Вот мой пример: http://daviddarx.com/stuffs/work/custom/54/

Манифест кэша действителен и протестирован на http://manifest-validator.com/ : http://daviddarx.com/stuffs/work/custom/54/cache.manifest

Поскольку это не сработало, я взял очень простой работающий пример, а затем попытался добавить свою часть кодов и данных шаг за шагом. шаг, с некоторыми дополнениями, а затем я проверил его снова.

Когда я начинаю с простого примера, все работает отлично. Если я переведу свой iPhone в режим полета, я получу офлайн-сообщение при запуске веб-сайта, но потом смогу просмотреть результат.

Когда я добавляю несколько своих ресурсов (HTML-код на страницу, 1-2 изображения и т. д.), он все еще работает.

Если я затем добавлю больше активов (например, css и все связанные изображения), начнутся проблемы... Если я перейду в режим плоскости, а затем открою страницу, у меня будет обычное сообщение (то, которое я получаю, когда оно работает), а затем другое сообщение с просьбой повторить попытку или отменить. Если я отменю, сайт просто не будет отображаться, и приложение закроется, а если я нажму кнопку повторной попытки, я снова и снова получаю одно и то же сообщение....

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

Это как-то связано с весом кэшированных файлов? Есть ли ограничения по размеру или файлам?

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

Вы знаете, откуда это могло взяться?


РЕДАКТИРОВАТЬ: я снова провел много тестов и до сих пор не могу заставить его работать.

Вот краткое изложение ситуации:

  1. Вот версия, которую я тестирую: http://daviddarx.com/stuffs/work/custom/61/

2. Это мой манифест кеша: http://daviddarx.com/stuffs/work/custom/61/manifest.appcache Полностью действителен в соответствии с http://manifest-validator.com/.

3. Когда я загружаю страницу в Chrome (рабочий стол) и показываю на консоли, все в порядке. Все элементы кешируются, и если я обновляюсь, кеш в порядке.

4. Когда я загружаю страницу на своем настольном хроме и смотрю на сетевую панель, я вижу, что все загружается из кеша. Нет ни одного отсутствующего файла.

5. Когда я отключаю свой настольный компьютер от любого интернета, он работает! Если я просматриваю веб-сайт с помощью Chrome без какого-либо подключения, я могу отображать страницы, и все в порядке, как и ожидалось на моем Iphone.

6. Когда я использую свой iPhone и захожу на сайт в первый раз, все в порядке. В консоли мобильного сафари нет ошибок. Если я включу «режим полета» и вернусь в сафари, я могу отобразить страницу, на которой я был (чего раньше не мог добиться). Но потом, если я пытаюсь изменить страницу, он просто предупреждает меня «Невозможно открыть страницу», а затем отменяет запрос. Я могу оставаться только на текущей странице.

На моем настольном компьютере все просто идеально, но это просто не работает на моем Iphone.

Есть ли у вас какие-либо идеи? Не могли бы вы попробовать это на своем рабочем столе и в браузере iPhone?


person daviddarx    schedule 20.08.2012    source источник
comment
Когда вы запускаете это в Chrome или Safari, вы видите какие-либо ошибки в консоли JS? Есть ли у вас какие-либо элементы в разделе NETWORK манифеста кеша? Можете ли вы опубликовать манифест кеша, как он выглядит, когда вам предлагается повторить попытку/отменить? Обычно это указывает на то, что чему-то в приложении требуется сетевой доступ к сайту, не указанному в разделе NETWORK манифеста кэша.   -  person Greg Wilson    schedule 21.08.2012
comment
Хм, вы правы, я просто вообще не разобрался с разделом СЕТЬ! Возможно, проблема исходит из этого. Вот манифест: daviddarx.com/stuffs/work/custom/54/cache .manifest Вы правы с цифрой доступа к сети. Я просто не думал об этом. Попробую разобрать все что называется на сайте, с чистой вкладкой инспектора! Спасибо за ваш вклад!   -  person daviddarx    schedule 21.08.2012
comment
Возникла проблема: Событие ошибки кэша приложения: Ошибка извлечения ресурса (404) daviddarx.com/stuffs/work/custom/61/mobile/php/mail.php вы должны указать это в разделе "Сеть": html5rocks.com/en/tutorials/appcache/beginner   -  person meo    schedule 29.08.2012


Ответы (2)


Проанализировал вашу /61/ тестовую версию:

Функция JS preloadDetailImages извлекает URL-адрес фонового изображения из класса CSS content и помещает его как атрибут src в новый объект изображения. Затем это изображение добавляется в DOM, по-видимому, для того, чтобы браузер предварительно загрузил его. Однако двойные кавычки вокруг URL-адреса в определении CSS не удаляются и поэтому становятся частью значения атрибута src. Это создает поврежденный URL-адрес, который, очевидно, не кэшируется и, следовательно, не работает в автономном режиме.

Это определение CSS:

#websiteContainer #customContainer .content {
    background-image: url("../images/custom_part_background.jpg");
}

С помощью этого кода JS вы извлекаете все внутри url(), включая двойные кавычки:

$($(".content")[actualImageLoadingID]).css("background-image")
.split("url(")[1].split(")")[0]

И это то, что заканчивается в документе (обратите внимание на "s):

<img src="&quot;http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg&quot;" style="display: none;">

Поскольку двойные кавычки могут быть допустимой частью URL-адреса, браузер интерпретирует это как относительный путь и пытается получить http://daviddarx.com/stuffs/work/custom/61/%22http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg%22 с вашего сервера. Я вижу это в своем http-сниффере.

Решение. Удалите кавычки в определении CSS или отфильтруйте их в функции JS.


Вероятно, это не основная причина ваших проблем с кэшированием на iPhone, и я бы предпочел добавить это в качестве комментария, но пока не имею на это прав.

person djk    schedule 29.08.2012

Вы говорите, что проблема начинает возникать, когда вы добавляете больше ресурсов. Возможно, вы превысили лимит кеша.

Вы можете проверить эту ссылку для получения дополнительной информации о квотах HTML5: http://updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts

person yadutaf    schedule 03.09.2012