在底部看到更新

Question

我有一个使用appcaching的离线Web应用程序。我需要提供大约10MB - 20MB的数据，它将保存（客户端）主要由PNG图像文件组成。操作如下：

Web应用程序下载并安装在appcache中（使用清单）
来自服务器PNG数据文件的Web应用程序请求（如何？ - 请参阅下面的替代方案）
有时候网络应用与服务器重新同步，并对PNG数据库进行小的部分更新/删除/添加
仅供参考：服务器是JSON REST服务器，可以将文件放在wwwroot中以便提取

以下是我目前对基于客户端的数据库＆＃34;数据库的分析。处理二进制blob存储

在底部看到更新

AppCache （通过清单添加所有PNG，然后按需更新）
- CON：PNG数据库项目的任何更改都意味着清单中所有项目的完整下载（真的是坏消息！）
的 WebStorage
- CON：专为JSON存储而设计
- CON：只能通过base64编码存储blob（由于解码成本可能导致致命缺陷）
- CON：webStorage http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html
PhoneGap＆amp; SQLLite
- CON：赞助商会将其拒绝为需要认证的原生应用
ZIP文件
- 服务器创建一个zip文件，将其放在wwwroot中，并通知客户端
- 用户必须手动解压缩（至少我是这样看的）并保存到客户端文件系统
- Web应用程序使用FileSystem API来引用文件
- CON：ZIP可能太大（zip64？），创建时间很长
- CON：不确定FileSystem API是否总能读出沙箱（我想是这样）
USB或SD卡（回到石器时代......）
- 用户在离线前将是服务器的本地用户
- 所以我们可以让他插入SD卡，让服务器用PNG文件填充
- 然后用户将其插入笔记本电脑，平板电脑
- Web应用程序将使用FileSystem API来读取文件
- CON：不确定FileSystem API是否总能读出沙箱（我想是这样）
的的WebSQL
- CON：w3c放弃了它（非常糟糕）
- 我可能会考虑使用IndexedDB和WebSQL作为后备的Javascript包装器
FileSystem API
- Chrome支持blob的读/写
- CON：不清楚IE和FireFox（IE10，有非标准的msSave）
- caniuse.com报告IOS和Android支持（但同样，这只是JSON的r / w，还是包含用于编写的完整blob API？
- CON：FireFox人不喜欢FileSystem API＆amp;不清楚他们是否支持储蓄blob：https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
- PRO：很多比针对blob的IndexedDB更快
的索引资料
- IE10中的良好支持，FireFox（保存，读取blob）
- 比文件系统更快速，更易于管理（删除，更新）
- PRO：参见速度测试：http://jsperf.com/indexeddb-vs-localstorage/15
- 请参阅有关在IndexedDB中存储和显示图像的文章：https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- CON：我确认Chrome还不支持blob写入（当前错误，但在修复时不清楚）
- 更新：Chrome开发者确认他们正在为桌面和Android工作！还没有时间表。
LawnChair JavaScript包装器http://brian.io/lawnchair/
- PRO：非常干净的IndexedDB，WebSQL或任何数据库的包装器（想想polyfill）
- CON：无法存储二进制blob，只能存储数据：uri（base64编码）（由于解码成本可能导致致命缺陷）
IndexedDB JQUERY polyFill https://github.com/axemclion/jquery-indexeddb
- Parashuram为原始的IndexedDB接口编写了一个很好的JQUERY包装器
- PRO：大大简化了使用IndexedDB，我希望为Chrome FileSystemAPI添加填充/填充
- CON：它应该处理blob，但我无法让它工作
idb.filesystem.js http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api
- Eric Bidelman @ Google编写了一个经过良好测试的PolyFill文件系统API，它使用索引数据库作为后退
- PRO：FileSystem API非常适合存储blob
- PRO：适用于FireFox和Chrome
  - PRO：非常适合与基于云的CouchDB同步
- CON：没有明确原因，但它不适用于IE10
PouchDB JavaScript库http://pouchdb.com/
- 非常适合将CouchDB与本地数据库同步（使用WebSQL或IndexedDB（不是我的问题）
- CON：没有缺陷，PouchDB现在支持所有最新浏览器（IE，Chrome，Firefox，移动设备上的Chrome等）以及许多旧版浏览器的二进制blob。当我第一次这样做时，情况并非如此。

注意：要查看数据：PNG的uri编码我创建了一个示例：http://jsbin.com/ivefak/1/edit

所需/有用/不需要的功能

客户端上没有本机（EXE，PhoneGap，ObjectiveC等）应用程序（纯Web应用程序）
只需要在最新的Chrome，FireFox，IE10笔记本电脑上运行
非常想要Android平板电脑的同样解决方案（IOS也不错）但只需要一个浏览器就可以工作（FF，Chrome等）
快速初始数据库人口
要求：通过Web应用程序从存储（DB，文件）中快速检索图像
不适合消费者。我们可以限制浏览器，并要求用户进行特殊设置＆amp;任务，但让我们最小化

IndexedDB实施

有一篇很好的文章介绍了IE，FF和Chrome如何在内部实现此目的：http://www.aaron-powell.com/web/indexeddb-storage
简而言之：
- IE使用与Exchange和Active Directory for IndexedDB相同的数据库格式
- Firefox正在使用SQLite，因此在SQL数据库中实现NoSQL数据库
- Chrome（和WebKit）正在使用具有BigTable遗产的Key / Value商店

我目前的结果

我选择使用IndexedDB方法（以及使用FileSystemAPI for Chrome的polyfill，直到他们提供blob支持）
为了获取瓷砖，我有一个困境，因为JQUERY的人们非常喜欢将它添加到AJAX中
我和Phil Parsons一起去了XHR2-Lib，这非常像JQUERY .ajax（）https://github.com/p-m-p/xhr2-lib
100MB下载的性能（IE10 4s，Chrome 6s，FireFox 7s）。
我无法让任何IndexedDB包装器适用于blob（lawnchair，PouchDB，jquery-indexeddb等）。
我推出了自己的包装，性能是（IE10 2s，Chrome 3s，FireFox 10s）
使用FF，我假设我们看到使用关系数据库（sqllite）进行非sql存储的性能问题
注意，Chrome具有出色的调试工具（开发人员标签，资源），用于检查IndexedDB的状态。

最终结果发布在以下作为回答

更新

PouchDB现在支持所有最新浏览器（IE，Chrome，Firefox，移动设备上的Chrome等）以及许多旧版浏览器的二进制blob。当我第一次这样做时，情况并非如此。

Answer 1

结果PNG slippy maps的离线blob缓存

<强>测试

171张PNG文件（共3.2MB）
平台测试：Chrome v24，FireFox 18，IE 10
还应该使用Chrome＆amp;适用于Android的FF

从网络服务器提取

使用XHR2（几乎所有浏览器都支持）从Web服务器下载blob
我和Phil Parsons一起去了XHR2-Lib，这非常像JQUERY .ajax（）
- https://github.com/p-m-p/xhr2-lib

<强>存储

用于IE和FireFox的IndexedDB
Chrome：Polyfill（使用FileSystem API存储的blob，保留在IndexedDB中的参考）polyfill
必读文章“浏览器如何存储IndexedDB数据”
- http://www.aaron-powell.com/web/indexeddb-storage
注意：FireFox使用SQLlite作为NOSQL IndexedDB。这可能是性能缓慢的原因。（blob单独存储）
注意：Microsoft IE使用可扩展存储引擎：
- http://en.wikipedia.org/wiki/Extensible_Storage_Engine
注意：Chrome使用LevelDB http://code.google.com/p/leveldb/

<强>显示

我正在使用Leaflet http://leafletjs.com/来显示地图图块
我使用Ishmael Smyrnow的功能图块层插件从DB中获取图块层
- https://github.com/ismyrnow/Leaflet.functionaltilelayer
我将基于数据库的切片图层与纯本地（localhost：//）存储
性能没有明显差异！在使用IndexedDB和本地文件之间！

<强>结果

Chrome：获取（6.551s），商店（8.247s），总经过时间：（13.714s）
FireFox：获取（0.422s），存储（31.519s），总经过时间：（32.836s）
IE 10：获取（0.668s），存储：（0.896s），总经过时间：（3.758s）

Answer 2

根据您的要求，我建议根据另外两个开发新的polyfill： FileSystem API to IndexedDB 和 IndexedDB到WebSQL - 是最好的选择。

前一个将支持在Chrome（FileSystem API）和Firefox（IndexedDB）中存储blob，而后者应该支持Android和iOS（WebSQL）。我们需要的是让这些填充剂一起工作，我想这并不难。

NB：由于我在网上找不到任何关于此的信息，您应该测试使用WebSQL polyfill存储blob是否适用于iOS和Android。它看起来应该可以工作：

var sql = ["CREATE TABLE", idbModules.util.quote(storeName), "(key BLOB", createOptions.autoIncrement ? ", inc INTEGER PRIMARY KEY AUTOINCREMENT" : "PRIMARY KEY", ", value BLOB)"].join(" ")

Source

Answer 3

几年前（不完全是石器时代），我使用了一个签名的java applet，它会查询服务器以同步/更新需求，从服务器下载适当的文件并将它们保存在用户的文件系统（不是数据库）上）。该解决方案可能适合您，但您需要有人编写applet并对其进行签名。对于数据库解决方案，这样的applet可以在合适的端口（例如，用于MySQL的3306）上使用localhost用于大多数数据库的jdbc。我相信applet标签在Html5中已弃用但它仍然有效。没有Android平板电脑的经验，因此无法对该部分发表评论。

Answer 4

我有地图缓存examples（打开示例，发现区域和缩放，离线切换和发现的区域将可用）。

有map.js - 离线图块的地图图层，storage.js - 基于IndexedDb和WebSQL的存储实现（但这只是性能不佳的测试实现）。

对于网站文件（html，css，js等），我更喜欢使用应用程序缓存。
对于存储，我更喜欢使用索引数据库（支持blob），Web SQL（仅限base64），FileWriter（支持blob，但只使用chrome）。坦率地说，存储是一个很大的问题。您需要最快的键值解决方案，将它们全部混合在一起。我认为使用现有解决方案是一个很好的决定。
为了获取我使用CORS的画布。但我考虑的是WebWorkers和XHR2，而这可能比canvas更好，因为canvas在不同浏览器和其他浏览器中存在一些问题（例如this title存储bad in opera）。

有关20亿城市（Minsk）的尺寸的其他信息：

缩放 - 9，瓷砖 - 2，尺寸 - 52 kb，以前 - 52 kb;
缩放 - 10，瓷砖 - 3，尺寸 - 72 kb，以前 - 124 kb;
Zoom - 11，tiles - 7，size - 204 kb，with previous - 328 kb;
放大 - 12，瓷砖 - 17，尺寸 - 348 kb，以前 - 676 kb;
缩放 - 13，瓷砖 - 48，尺寸 - 820 kb，以前 - 1.5 mb;
缩放 - 14，瓷砖 - 158，尺寸 - 2.2 mb，以前 - 3.7 mb;
放大 - 15，瓷砖 - 586，尺寸 - 5.5 mb，以前 - 9.3 mb;
缩放 - 16，瓷砖 - 2264，尺寸 - 15 mb，以前 - 24.3 mb;

存储脱机Web应用程序的映像数据（客户端存储数据库）

在底部看到更新

更新

4 个答案: