例如,假设我们正在构建一个只有1页的简单列表应用程序.应用程序的唯一目的是列出5个项目,每个项目包含一些文本和1个图像.

该应用程序有一个简单的徽标和一些单独的JavaScript和CSS代码.使用缓存清单文件缓存这些静态资源.

有2个场景：

场景1：我在线,我打开了Web应用程序

当我在Safari中加载列表应用程序时,它将从包含1000个项目的数据库中获取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(使用CSS设置样式)呈现5个项目,没什么特别的.包含指向图像资源的文本和图像标记的跨度标记已创建等.

在线模式下,一切都很棒.

场景2：我离线了,我打开了Web应用程序

页面加载(显示徽标是因为它使用缓存清单缓存为静态资源),一些JavaScript检测到我们确实脱机,因此应用程序不会尝试联系后端.相反,它从本地存储读取先前存储的JSON对象,并开始渲染5个项目.一切如预期.

文本显示正常,但这次没有显示图像,原因很简单,图像标签指向不可用的图像资源.因此它显示小图像不可用图标.

现在我的问题是,有什么办法以某种方式缓存这些图像资源？因此,下次我们需要它们时,它们将从缓存中获取.

这就是我尝试过的：

> Base64对图像进行编码并通过JSON提供.这工作但是,它大大增加了抓取和渲染时间(我们说的是增加30秒,非常慢)
>一些缓存显示黑客攻击/反复试验..无法找到任何有效的东西(理想情况下需要一个政策’在请求时’缓存域上的所有资源’,但据我所知,这不存在)

我真的花了几个小时才找到解决方案……有没有人有线索？我知道这是可能的,因为如果您查看iPhone的Google Mail HTML5应用程序,他们可以以某种方式缓存附件,即使在离线时也可以检索它们.

我们还没有尝试过的一件事就是使用Safari支持的sqlite数据库…也许我可以将图像存储为BLOB(仍然意味着从源中获取它因此变慢？)然后以某种方式神奇地将其转换为屏幕上的图像….但我不知道如何做到这一点.

任何帮助表示赞赏,谢谢.