У нас есть веб-приложение, которое позволяет пользователям просматривать SVG.Эти SVG обычно содержат изображения, которые загружаются с использованием относительного URL.Поскольку мы хотим, чтобы это было «веб-приложение» для iPad, мы также хотим, чтобы оно добавлялось на домашний экран пользователя iPad и кэшировалось в кэше приложения HTML 5, чтобы пользователь мог просматривать эти SVG и связанные изображения в автономном режиме.
Когда наше приложение загружается с иконки домашней страницы iPad, манифест кэша приложения читается правильно, и все ссылочные ресурсы кэшируются.Эта проблема возникает, когда пользователь начинает использовать приложение в автономном режиме.Во время использования приложения SVG добавляются и удаляются со страницы DOM.Во время этого некоторые изображения в SVG не могут быть загружены из кэша приложения, даже если они определенно присутствуют и кэшируются.Вместо этого на сервер отправляется запрос изображения, который, очевидно, не выполняется, поскольку пользователь больше не подключен к сети.
Интересно, что эта проблема, по-видимому, не возникает при переходе на страницу в сафари наIPAD.Кажется, что он специфичен для представления веб-приложения на всю страницу, хотя я не могу этого гарантировать.
Я могу довольно легко воспроизвести это, используя эту HTML-страницу:
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function ()
{
$("#remove").click(function ()
{
$("embed").remove();
});
$("#add").click(function ()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function ()
{
$("embed").show();
});
$("#hide").click(function ()
{
$("embed").hide();
});
$("#reload").click(function ()
{
location.reload(true);
});
})
</script>
</body>
</html>
Этот SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
Это изображение, на которое ссылается SVG:
И этот файл манифеста:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
И следующимэти шаги:
- Откройте Safari и перейдите к расположению файла воспроизведения html (мы размещаем его на сервере Windows 2008 / IIS)
- Добавьте страницу на главный экран, используякнопка «Добавить на главный экран».
- Закрыть сафари и очистить кэш сафари
- Загрузить страницу из недавно добавленной закладки
- Подождите, пока страница полностью не будет кэширована.,Обычно около 5-10 секунд, но вы можете прикрепить к некоторым событиям кэша приложения, чтобы выйти из системы.
- Отключить Wi-Fi (или какой-либо другой способ подключения, который вы используете)
- Загрузитьстраница из недавно добавленной закладки
- Обратите внимание, что страница выглядит правильно кэшированной.Используйте кнопки добавления и удаления.Вы должны заметить довольно быстро, что, когда вы добавляете, используя кнопку «Добавить» на странице.Ресурс изображения в SVG не всегда загружается из кэша приложения, даже если он явно кэширован.
Когда возникает проблема, вы должны увидеть что-то вроде снимка экрана ниже
Я уже проверил некоторые очевидные вещи:
- Манифест кэша приложения имеет правильный тип MIME
- Манифест загружен
- Ресурсы, указанные в манифесте, кэшируются правильно
Мои вопросы:
- Кто-нибудь знает, почему это происходит?
- Есть ли какие-либо обходные пути к этой проблеме?
Я зарегистрировал это как ошибку с яблоком, поэтому я обновлю этот вопрос с любыми отзывами, которые я могу получить от них!
Спасибо!
Энди.