首页 文章

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

提问于
浏览 次
98

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

  • Web应用程序下载并安装在appcache中（使用清单）

  • 来自服务器PNG数据文件的Web应用程序请求（如何？ - 请参阅下面的备选方案）

  • 偶尔Web服务器与服务器重新同步，并对PNG数据库进行小的部分更新/删除/添加

  • 仅供参考：服务器是JSON REST服务器，可以将文件放在wwwroot中以便提取

这是我目前对处理二进制blob存储的基于客户端的“数据库”的分析

在底部看到更新

  • AppCache （通过清单添加所有PNG，然后按需更新）

  • CON：PNG数据库项目的任何更改都意味着清单中所有项目的完整下载（真的是坏消息！）

  • WebStorage

  • CON：专为JSON存储而设计

  • CON：只能通过base64编码存储blob（由于解码成本可能导致致命缺陷）

  • CON：webStorage的硬限制为5MB http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html

  • PhoneGap & SQLLite

  • CON：赞助商会将其拒绝为需要认证的原生应用

  • ZIP file

  • Server创建一个zip文件，将其放在wwwroot中，并通知客户端

  • 用户必须手动解压缩（至少这是我看到的）并保存到客户端文件系统

  • Web应用程序使用FileSystem API来引用文件

  • CON：ZIP可能太大（zip64？），创建时间很长

  • CON：不确定FileSystem API是否总能读出沙箱（我想是这样）

  • USB or SD card （回到石器时代......）

  • 用户在脱机前将是服务器的本地用户

  • 所以我们可以让他插入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而不清楚他们是否支持保存blob：https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/

  • PRO：根据jsperf http://jsperf.com/indexeddb-vs-localstorage/15（第2页）比Blob的IndexedDB快得多

  • 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 FileSystem API，它使用索引数据库作为后退

  • PRO：FileSystem API非常适合存储blob

  • PRO：适用于FireFox和Chrome

  • PRO：非常适合与基于 Cloud 的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

Desired/Usefull/Uneeded Features

  • 客户端上没有原生（EXE，PhoneGap，ObjectiveC等）应用程序（纯Web应用程序）

  • 只需要在笔记本电脑的最新Chrome，FireFox和IE10上运行

  • 非常想要Android平板电脑的同样解决方案（IOS也不错）但只需要一个浏览器就可以工作（FF，Chrome等）

  • 快速初始DB数量

  • 要求：通过Web应用程序快速检索图像存储（数据库，文件）

  • 不适合消费者 . 我们可以限制浏览器，并要求用户进行特殊的设置和任务，但让我们尽量减少

IndexedDB Implementations

  • 有一篇关于IE，FF和Chrome如何在内部实现此目的的优秀文章：http://www.aaron-powell.com/web/indexeddb-storage

  • 简而言之：

  • IE使用与Exchange和Active Directory相同的数据库格式用于IndexedDB

  • Firefox正在使用SQLite，所以有点在SQL数据库中实现NoSQL数据库

  • Chrome（和WebKit）正在使用Key / Value商店，该商店在BigTable中具有传统

My Current Results

  • 我选择使用IndexedDB方法（并使用FilefystemAPI 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的状态 .

FINAL Results posted below as answer

更新

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

javascript html5 web-applications indexeddb leaflet

4 回答

  • 4

    结果PNG slippy maps的离线blob缓存

    Testing

    999 171 PNG文件（共3.2MB）

    • 平台测试：Chrome v24，FireFox 18，IE 10

    • 也适用于Android版Chrome和FF

    Fetch from web server

    • 使用XHR2（几乎所有浏览器都支持）从Web服务器下载blob

    • 我和Phil Parsons一起去了XHR2-Lib，这非常像JQUERY .ajax（）

    • https://github.com/p-m-p/xhr2-lib

    Storage

    Display

    Results

    • Chrome：获取（6.551s），存储（8.247s），总经过时间：（13.714s）

    • FireFox：获取（0.422s），存储（31.519s），总经过时间：（32.836s）

    • IE 10：获取（0.668s），存储：（0.896s），总经过时间：（3.758s）

    回复于
  • 1

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

    回复于
  • 0

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

    回复于
  • 22

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

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

    • 对于站点文件（html，css，js等），我更喜欢使用应用程序缓存 .

    • 对于存储，我更喜欢使用索引数据库（支持blob），Web SQL（仅限base64），FileWriter（支持blob，但只使用chrome） . 坦率地说，存储是一个很大的问题 . 您需要最快的键值解决方案，将它们全部混合在一起 . 我认为使用现有解决方案是一个很好的决定 .

    • For我使用CORS的画布 . 但我考虑WebWorkers和XHR2，这可能更好，而不是画布，因为画布在不同的浏览器和其他浏览器中有一些CORS的麻烦（例如this title存储bad in opera） .

    有关20亿城市规模的其他信息（Minsk）：

    • 放大 - 9，瓷砖 - 2，尺寸 - 52 kb，以前 - 52 kb;

    • 放大 - 10，瓷砖 - 3，尺寸 - 72 kb，以前 - 124 kb;

    • 放大 - 11，瓷砖 - 7，尺寸 - 204 kb，以前 - 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;

    回复于

相关问题