为什么以前在iPad上缓存时,SVG中的图像并不总是从应用程序缓存中加载？
And*_*ndy 5 safari html5 application-cache ipad ios
我们有一个Web应用程序,允许用户查看SVG.这些SVG通常包含使用相对URL加载的图像.由于我们希望将其作为iPad"网络应用程序",我们还希望将其添加到iPad用户的主屏幕,并通过HTML 5应用程序缓存进行缓存,以便用户可以离线查看这些SVG和相关图像.
当我们的应用程序从iPad主页图标加载时,将正确读取应用程序缓存清单,并缓存所有引用的资源.当用户开始脱机使用应用程序时,会出现此问题.在使用应用程序期间,会在页面DOM中添加和删除SVG.在此期间,SVG中的某些映像无法从应用程序缓存加载,即使它们肯定存在并缓存.相反,向服务器发出了对图像的请求,这显然是因为用户不再在线而失败.
有趣的是,当在iPad上的safari中导航到页面时,似乎不会出现此问题.它似乎特定于整页Web应用程序视图,但我无法保证.
我可以使用这个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类型
- Manifest已下载
- 清单中引用的资源正确缓存
我的问题是:
- 有谁知道为什么会这样？
- 这个问题有没有解决方法？
我已将此记录为苹果的错误,因此我将根据我可能从中获得的任何反馈更新此问题!
谢谢!
安迪.
只是一个小小的“抬起头来！” 如果你正在思考这个问题，就像我一小时前一样......：
清单文件区分大小写。
我有一个专为在台式机、平板电脑和智能手机上使用而设计的网站。在 Android (4.0.3) 上，我注意到启用 HTML 5 应用程序缓存后，我的 SVG 图标开始失败，就像上面的情况一样。当用户刷新页面（并且尝试从缓存中获取图标）时，它们显示为断开的链接。
我在 SVG 图标的文件夹名称中写了一个字母，大小写错误，修复此问题立即解决了问题。
| 归档时间： |
|
| 查看次数： |
1486 次 |
| 最近记录： |