我们有一个允许用户查看 SVG 的 Web 应用程序。这些 SVG 通常包含使用相对 url 加载的图像。由于我们希望这是一个 iPad 的“网络应用程序”，我们还希望将它添加到 iPad 用户的主屏幕，并由 HTML 5 应用程序缓存对其进行缓存，以便用户可以离线查看这些 SVG 和相关图像。
当我们的应用程序从 iPad 主页图标加载时，应用程序缓存清单被正确读取，并且所有引用的资源都被缓存。当用户开始离线使用应用程序时，就会出现此问题。在应用程序的使用过程中，会在页面 DOM 中添加和删除 SVG。在此期间，SVG 中的某些图像无法从应用程序缓存中加载，即使它们确实存在并已缓存。相反，向服务器发出了对图像的请求，这显然失败了，因为用户不再在线。
有趣的是，在 iPad 上导航到 safari 中的页面时，似乎不会出现此问题。它似乎特定于整页网络应用程序视图，尽管我不能保证。
我可以使用这个 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 服务器上）
- 使用“添加到主屏幕”按钮将页面添加到主屏幕。
- 关闭 safari 并清理 safari 缓存
- 从新添加的书签加载页面
- 等到页面完全缓存。通常大约 5-10 秒，但您可以附加到一些应用程序缓存事件以注销进度。
- 关闭 wifi（或您使用的任何连接方式）
- 从新添加的书签加载页面
- 请注意，页面看起来已正确缓存。使用添加和删除按钮。当您使用页面上的“添加”按钮进行添加时，您应该很快注意到这一点。SVG 中的图像资源并不总是从应用程序缓存中加载，即使它已被明确缓存。
出现问题时，您应该会看到类似于以下屏幕截图的内容
我已经检查了一些明显的事情：
- 应用程序缓存清单具有正确的 mime 类型
- 清单已下载
- 清单中引用的资源已正确缓存
我的问题是：
- 有谁知道为什么会这样？
- 有没有解决这个问题的方法？
我已将此记录为苹果的错误，因此我将使用可能从他们那里获得的任何反馈来更新此问题！
谢谢！
安迪。