草庐IT

ios - 为什么以前缓存在 iPad 上的 SVG 图像并不总是从应用程序缓存中加载？

coder 2023-08-12 原文

我们有一个允许用户查看 SVG 的网络应用程序。这些 SVG 通常包含使用相对 URL 加载的图像。由于我们希望这是一个 iPad 的“网络应用程序”，我们还希望将其添加到 iPad 用户的主屏幕，并由 HTML 5 应用程序缓存对其进行缓存，以便用户可以离线查看这些 SVG 和相关图像。

当我们的应用程序从 iPad 主页图标加载时，应用程序缓存 list 被正确读取，所有引用的资源都被缓存。当用户开始脱机使用应用程序时会出现此问题。在应用程序的使用过程中，会在页面 DOM 中添加和删除 SVG。在此期间，SVG 中的某些图像无法从应用程序缓存中加载，即使它们肯定存在并缓存。相反，向服务器发出图像请求，这显然失败了，因为用户不再在线。

有趣的是，在 iPad 上导航到 safari 中的页面时似乎没有出现此问题。它似乎特定于整页 Web 应用程序 View ，但我不能保证。

我可以使用这个 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 引用的这张图片:

还有这个 list 文件:

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 中的图像资源并不总是从应用程序缓存中加载，即使它已明确缓存。

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

我已经检查了一些明显的东西:

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

我的问题是:

  • 有谁知道为什么会这样？
  • 是否有解决此问题的方法？

我已将此记录为 apple 的错误，因此我会根据可能从他们那里得到的任何反馈来更新此问题!

谢谢!

安迪。

最佳答案

只是一个小小的“提醒!”如果你正在思考这个问题，就像我一个小时前一样......:

list 文件区分大小写。

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

我在错误的情况下在文件夹名称中写了一个字母到我的 SVG 图标，并立即解决了这个问题。

关于ios - 为什么以前缓存在 iPad 上的 SVG 图像并不总是从应用程序缓存中加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9804974/

中加是从34gtltiosipadhtmlsafariapplication-cache

有关ios - 为什么以前缓存在 iPad 上的 SVG 图像并不总是从应用程序缓存中加载？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  4. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  5. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  6. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  7. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  8. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  9. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  10. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

随机推荐