我们正在为iPhone构建离线工作的Web应用程序。但我们在缓存动态图片方面遇到了困难。请继续阅读,我将通过实例准确地展示我的意思以及我们迄今为止所做的事情。
例如,让我们说我们正在构建一个简单的列表应用程序,只有1个页面。该应用程序的唯一目的是列出5个项目,每个项目包含一些文本和1个图像。
该应用程序具有简单的标志、一些独立的JavaScript和CSS代码。这些静态资源使用缓存清单文件进行缓存。
有2种情况:
情况1:我在线并打开Web应用程序
当我在Safari中加载列表应用程序时,它会从包含数千个项的数据库中获取5个新的随机项。所有这些都是通过AJAX调用(JSON格式)由简单的后端提供的。
整个包含5个项目的JSON对象立即存储在HTML5本地存储中,并缓存以供离线使用。
JSON对象的结构有点像这样:
如您所见,非常简单(JSON 中可能存在一些错误),整个 JSON 对象存储在本地存储中。现在,使用 JavaScript 注入的 HTML 渲染 5 个项目(使用 CSS 进行样式设置),没有什么花哨的东西。创建包含文本的 span 标签和指向图像资源的 image 标签等。在线模式下,一切都很顺利。第二种情况:我离线并打开 Web 应用程序。页面加载(显示标志,因为其作为静态资源使用缓存清单进行了缓存),一些 JavaScript 检测到我们确实离线,并且应用程序因此不会尝试联系后端。而是从本地存储中读取先前存储的 JSON 对象并开始渲染 5 个项目。所有都符合预期。文本显示得很好,但是这次,图像没有显示,原因很简单,图像标签指向不可用的图像资源。因此,它显示了那个小图像不可用图标。现在我的问题是,有没有办法以某种方式缓存这些图像资源?这是我尝试过的:对图像进行 Base64 编码并通过 JSON 提供它们。这有效,但它会大大增加获取和呈现时间(我们谈论的是增加 30 秒,非常慢)。一些缓存清单黑客/试错。。找不到任何有效的东西(理想情况下需要一个策略,即'当它们被请求时,缓存域上的所有资源',但据我所知,这种策略不存在)。我已经花了几个小时在这上面,找不到解决办法...有人有线索吗?我知道这是可能的,因为如果您查看 iPhone 的 Google Mail HTML5 应用程序,它们可以以某种方式缓存附件,即使在离线状态下也可以检索它们。我们没有尝试过的一件事是使用 Safari 支持的 SQLite 数据库...也许我可以将图像作为 BLOB 存储(仍然意味着从 feed 中获取它,因此很慢?)然后在屏幕上以某种神奇的方式将其转换为图像....但我不知道如何做到这一点。感谢任何帮助。
例如,让我们说我们正在构建一个简单的列表应用程序,只有1个页面。该应用程序的唯一目的是列出5个项目,每个项目包含一些文本和1个图像。
该应用程序具有简单的标志、一些独立的JavaScript和CSS代码。这些静态资源使用缓存清单文件进行缓存。
有2种情况:
情况1:我在线并打开Web应用程序
当我在Safari中加载列表应用程序时,它会从包含数千个项的数据库中获取5个新的随机项。所有这些都是通过AJAX调用(JSON格式)由简单的后端提供的。
整个包含5个项目的JSON对象立即存储在HTML5本地存储中,并缓存以供离线使用。
JSON对象的结构有点像这样:
{
"0" : {
id: "3",
text: "Some text about item #3",
image_url: "http://www.domain.com/image22341.png"
},
"1" : {
id: "23",
text: "Some text about item #23",
image_url: "http://www.domain.com/image442321.png"
},
"2" : {
id: "4",
text: "Some text about item #4",
image_url: "http://www.domain.com/image2321.png"
},
"3" : {
id: "432",
text: "Some text about item #432",
image_url: "http://www.domain.com/image2441.png"
},
"4" : {
id: "43",
text: "Some text about item #43",
image_url: "http://www.domain.com/image221.png"
}
}
如您所见,非常简单(JSON 中可能存在一些错误),整个 JSON 对象存储在本地存储中。现在,使用 JavaScript 注入的 HTML 渲染 5 个项目(使用 CSS 进行样式设置),没有什么花哨的东西。创建包含文本的 span 标签和指向图像资源的 image 标签等。在线模式下,一切都很顺利。第二种情况:我离线并打开 Web 应用程序。页面加载(显示标志,因为其作为静态资源使用缓存清单进行了缓存),一些 JavaScript 检测到我们确实离线,并且应用程序因此不会尝试联系后端。而是从本地存储中读取先前存储的 JSON 对象并开始渲染 5 个项目。所有都符合预期。文本显示得很好,但是这次,图像没有显示,原因很简单,图像标签指向不可用的图像资源。因此,它显示了那个小图像不可用图标。现在我的问题是,有没有办法以某种方式缓存这些图像资源?这是我尝试过的:对图像进行 Base64 编码并通过 JSON 提供它们。这有效,但它会大大增加获取和呈现时间(我们谈论的是增加 30 秒,非常慢)。一些缓存清单黑客/试错。。找不到任何有效的东西(理想情况下需要一个策略,即'当它们被请求时,缓存域上的所有资源',但据我所知,这种策略不存在)。我已经花了几个小时在这上面,找不到解决办法...有人有线索吗?我知道这是可能的,因为如果您查看 iPhone 的 Google Mail HTML5 应用程序,它们可以以某种方式缓存附件,即使在离线状态下也可以检索它们。我们没有尝试过的一件事是使用 Safari 支持的 SQLite 数据库...也许我可以将图像作为 BLOB 存储(仍然意味着从 feed 中获取它,因此很慢?)然后在屏幕上以某种神奇的方式将其转换为图像....但我不知道如何做到这一点。感谢任何帮助。