5

我们有一个允许用户查看 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 引用的这张图片：

SVG 引用的图像

这个清单文件：

CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js

并按照以下步骤操作：

  1. 打开 safari 并导航到复制 html 文件的位置（我们将其托管在 Windows 2008 / IIS 服务器上）
  2. 使用“添加到主屏幕”按钮将页面添加到主屏幕。
  3. 关闭 safari 并清理 safari 缓存
  4. 从新添加的书签加载页面
  5. 等到页面完全缓存。通常大约 5-10 秒，但您可以附加到一些应用程序缓存事件以注销进度。
  6. 关闭 wifi（或您使用的任何连接方式）
  7. 从新添加的书签加载页面
  8. 请注意，页面看起来已正确缓存。使用添加和删除按钮。当您使用页面上的“添加”按钮进行添加时，您应该很快注意到这一点。SVG 中的图像资源并不总是从应用程序缓存中加载，即使它已被明确缓存。

出现问题时，您应该会看到类似于以下屏幕截图的内容

带有图像的 SVG 屏幕截图无法从应用程序缓存中加载图像

我已经检查了一些明显的事情：

  • 应用程序缓存清单具有正确的 mime 类型
  • 清单已下载
  • 清单中引用的资源已正确缓存

我的问题是：

  • 有谁知道为什么会这样？
  • 有没有解决这个问题的方法？

我已将此记录为苹果的错误，因此我将使用可能从他们那里获得的任何反馈来更新此问题！

谢谢！

安迪。

4

1 回答 1

0

只是一个小小的“抬头”！如果您正在考虑这个问题，就像我一个小时前一样......：

清单文件区分大小写。

我有一个设计用于台式机、平板电脑和智能手机的网站。在 Android (4.0.3) 上，我注意到启用 HTML 5 App Cache 后，我的 SVG 图标开始失败，就像上面的情况一样。当用户刷新页面（并尝试从缓存中获取图标）时，它们显示为断开的链接。

我在文件夹名称中写了一封信给我的 SVG 图标，写错了，修复这个问题立即解决了这个问题。

于 2012-06-22T11:53:37.930 回答