Dr.*_*YSG
103
javascript
html5
web-applications
indexeddb
leaflet
我有一个使用appcaching的离线Web应用程序.我需要提供大约10MB - 20MB的数据,它将保存(客户端)主要由PNG图像文件组成.操作如下:
- Web应用程序下载并安装在appcache中(使用清单)
- 服务器PNG数据文件的Web应用程序请求(如何？ - 请参阅下面的替代方案)
- 有时Web应用程序与服务器重新同步,并对PNG数据库进行小的部分更新/删除/添加
- 仅供参考:服务器是JSON REST服务器,可以将文件放在wwwroot中以便提取
这是我目前对处理二进制blob存储的基于客户端的"数据库"的分析
在底部看到更新
- AppCache(通过清单添加所有PNG,然后按需更新)
- CON:PNG数据库项目的任何更改都意味着清单中所有项目的完整下载(真的是坏消息!)
- WebStorage
- PhoneGap和SQLLite
- 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
- 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写入(当前的bug,但不清楚何时修复)
- 更新: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添加垫片/ polyfill
- CON:它应该处理blob,但我无法让它工作
- idb.filesystem.js http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api
- Eric Bidelman @ Google编写了一个经过良好测试的PolyFill FileSystem API,它使用索引数据库作为后备
- PRO:FileSystem API非常适合存储blob
- PRO:在FireFox和Chrome上运行良好
- 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等)
- 快速初始DB数量
- 要求:通过Web应用程序从存储(DB,文件)快速检索图像
- 不适合消费者.我们可以限制浏览器,并要求用户进行特殊设置和任务,但让我们尽量减少
IndexedDB实现
我目前的结果
- 我选择使用IndexedDB方法(并使用FilefystemAPI for Chrome进行polyfill,直到它们提供blob支持)
- 为了获取瓷砖,我有一个困境,因为JQUERY的人们非常喜欢将它添加到AJAX
- 我和Phil Parsons一起去了XHR2-Lib,这非常像JQUERY .ajax()https://github.com/pmp/xhr2-lib
- 性能为100MB下载(IE10 4s,Chrome 6s,FireFox 7s).
- 我无法获得任何IndexedDB包装器适用于blob(lawnchair,PouchDB,jquery-indexeddb等)
- 我推出了自己的包装,性能是(IE10 2s,Chrome 3s,FireFox 10s)
- 使用FF,我假设我们看到使用关系DB(sqllite)进行非sql存储的性能问题
- 注意,Chrome具有出色的调试工具(开发人员选项卡,资源),用于检查IndexedDB的状态.
最终结果发布在下面作为答案
更新
PouchDB现在支持所有最新浏览器(IE,Chrome,Firefox,移动设备上的Chrome等)以及许多旧版浏览器的二进制blob.当我第一次这样做时,情况并非如此.