7

我对 HTML5 Web 存储和应用程序缓存正在慢慢地但肯定会完全发疯。

这是我的例子： http ://daviddarx.com/stuffs/work/custom/54/

缓存清单有效并在http://manifest-validator.com/上进行了测试：http : //daviddarx.com/stuffs/work/custom/54/cache.manifest

由于它不起作用，我采取了一个非常简单的工作示例，然后尝试逐步添加我的部分代码和数据，添加很少，然后我再次测试它。

当我从一个简单的例子开始时，一切都很好。如果我将 iPhone 置于平面模式，则在启动网站时会收到一条离线消息，但随后我可以查看结果。

当我添加一些资产（页面中的 HTML 代码、1-2 张图片等）时，它仍然可以正常工作。

如果我然后添加更多资产（例如，css 和所有相关的图像），问题就开始了......如果我进入平面模式然后打开页面，我会收到正常消息（当它是工作），然后是另一条消息，要求我重试或取消。如果我取消，网站就不会显示并且应用程序关闭，如果我按下重试按钮，我会一次又一次地收到相同的消息......

我真的不知道该怎么办。每次我在测试之前验证我的缓存清单，每次我更改 URL 以确保一切都被重置。

这是否与缓存文件的重量有关？大小或文件有限制吗？

另一句话：在测试之前，我总是在我的计算机上的控制台中检查我的页面，以确保这不是一个明显的问题。事实上，每次尝试都在桌面浏览器上成功，加载了所有资产。

你知道那可能来自哪里吗？

编辑：我又做了很多测试，但仍然无法正常工作。

以下是情况的摘要：

  1. 这是我正在测试的版本：http: //daviddarx.com/stuffs/work/custom/61/

2. 这是我的缓存清单：http ://daviddarx.com/stuffs/work/custom/61/manifest.appcache 根据http://manifest-validator.com/完全有效。

3.当我在chrome（桌面）上加载页面并在控制台上显示时，一切正常。所有元素都被缓存了，如果我刷新，缓存就可以了。

4. 当我在桌面 chrome 上加载页面并查看网络面板时，我可以看到所有内容都是从缓存中加载的。没有任何丢失的文件。

5. 当我断开我的台式电脑与任何互联网的连接时，它就可以工作了！如果我在没有任何连接的情况下使用 chrome 浏览网站，我可以显示页面，一切都很好，因为我希望它会出现在我的 Iphone 上。

6. 当我第一次使用我的 iPhone 并访问该网站时，一切正常。移动 Safari 的控制台没有任何错误。如果我打开“平面模式”并返回 safari，我可以显示我所在的页面（我以前无法实现）。但是，如果我尝试更改页面，它只会警告我“无法打开页面”，然后取消请求。我只能停留在当前页面。

在我的台式电脑上一切都很完美，但在我的 Iphone 上却不行。

你有什么主意吗？你能在你的桌面和iphone浏览器上试试吗？

4

2 回答 2

4

分析了您的 /61/ 测试版本：

JS 函数preloadDetailImages从 CSS 类中提取背景图像 URL content，并将其作为src属性放入新的 Image 对象中。然后将此图像添加到 DOM 中，显然是为了让浏览器预加载它。但是，CSS 定义中 URL 周围的双引号不会被删除，因此最终会成为src属性值的一部分。这会产生一个损坏的 URL，该 URL 显然没有被缓存，因此无法脱机工作。

这是 CSS 定义：

#websiteContainer #customContainer .content {
    background-image: url("../images/custom_part_background.jpg");
}

使用此 JS 代码，您可以提取 url() 中的所有内容，包括双引号：

$($(".content")[actualImageLoadingID]).css("background-image")
.split("url(")[1].split(")")[0]

这就是文档中的内容（注意"s）：

<img src="&quot;http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg&quot;" style="display: none;">

由于双引号可以是有效的 URL 部分，浏览器将其解释为相对路径并尝试检索 /stuffs/work/custom/61/%22http://daviddarx.com/stuffs/work/custom/61/mobile/ images/custom_part_background.jpg%22来自您的服务器。我可以在我的 http 嗅探器中看到它。

解决方案：删除 CSS 定义中的引号或在 JS 函数中过滤掉它们。

这可能不是您在 iPhone 上出现缓存问题的主要原因，我宁愿将其添加为评论，但还没有权限。

于 2012-08-29T16:05:46.513 回答
1

您说当您添加更多资产时问题开始出现。您可能正在达到缓存限制。

您可以查看此链接以获取有关 HTML5 配额的更多背景信息：http: //updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts

于 2012-09-03T22:46:21.727 回答