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

时间:2013-01-01 18:56:53

标签: javascript html5 web-applications indexeddb leaflet

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

  1. Web应用程序下载并安装在appcache中(使用清单)
  2. 来自服务器PNG数据文件的Web应用程序请求(如何? - 请参阅下面的替代方案)
  3. 有时候网络应用与服务器重新同步,并对PNG数据库进行小的部分更新/删除/添加
  4. 仅供参考:服务器是JSON REST服务器,可以将文件放在wwwroot中以便提取
  5. 以下是我目前对基于客户端的数据库"数据库的分析。处理二进制blob存储

    在底部看到更新

    • AppCache (通过清单添加所有PNG,然后按需更新)
      • CON:PNG数据库项目的任何更改都意味着清单中所有项目的完整下载(真的是坏消息!)
    • WebStorage
    • PhoneGap& 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
    • 索引资料
    • 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,文件)中快速检索图像
    • 不适合消费者。我们可以限制浏览器,并要求用户进行特殊设置&任务,但让我们最小化

    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。当我第一次这样做时,情况并非如此。

4 个答案:

答案 0 :(得分:22)

结果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()

<强>存储

<强>显示

<强>结果

  • Chrome:获取(6.551s),商店(8.247s),总经过时间:(13.714s)
  • FireFox:获取(0.422s),存储(31.519s),总经过时间:(32.836s)
  • IE 10:获取(0.668s),存储:(0.896s),总经过时间:(3.758s)

答案 1 :(得分:4)

根据您的要求,我建议根据另外两个开发新的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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

我有地图缓存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;