112

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

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

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

请参阅底部的更新

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

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

  • 网络存储

  • PhoneGap & SQLLite

    • CON：赞助商将拒绝它作为需要认证的原生应用程序

  • 压缩文件

    • 服务器创建一个 zip 文件，将其放在 wwwroot 中，并通知客户端
    • 用户必须手动解压缩（至少我是这样看的）并保存到客户端文件系统
    • Web 应用使用 FileSystem API 来引用文件
    • CON：ZIP 可能太大（zip64？），创建时间长
    • CON：不确定 FileSystem API 是否总是可以从沙箱中读取（我想是的）

  • USB 或 SD 卡（回到石器时代......）

    • 用户在离线之前将在服务器本地
    • 所以我们可以让他插入一张 SD 卡，让服务器用 PNG 文件填充它
    • 然后用户将其插入笔记本电脑、平板电脑
    • Web 应用程序将使用 FileSystem API 来读取文件
    • CON：不确定 FileSystem API 是否总是可以从沙箱中读取（我想是的）

  • WebSQL

    • 缺点：w3c 已经放弃了它（很糟糕）
    • 我可能会考虑使用 IndexedDB 和 WebSQL 作为后备的 Javascript 包装器

  • 文件系统 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快得多

  • 索引数据库

  • LawnChair JavaScript 包装器http://brian.io/lawnchair/

    • PRO：非常干净的 IndexedDB、WebSQL 或您拥有的任何数据库的包装器（想想 polyfill）
    • CON：不能存储二进制 blob，只能存储 data:uri（base64 编码）（由于解码成本，可能是致命缺陷）

  • IndexedDB JQUERY polyFill https://github.com/axemclion/jquery-indexeddb

    • Parashuram 为原始 IndexedDB 接口编写了一个不错的 JQUERY 包装器
    • PRO：大大简化了 IndexedDB 的使用，我希望为 Chrome FileSystemAPI 添加一个 shim/polyfill
    • 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 的 data:uri 编码，我在以下位置创建了一个示例：http: //jsbin.com/ivefak/1/edit

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

  • 客户端上没有本机（EXE、PhoneGap、ObjectiveC 等）应用程序（纯 Web 应用程序）
  • 只需要在笔记本电脑上运行最新的 Chrome、FireFox、IE10
  • 强烈希望为 Android 平板电脑提供相同的解决方案（IOS 也不错），但只需要一个浏览器即可工作（FF、Chrome 等）
  • 快速初始数据库填充
  • 要求：Web 应用程序从存储（数据库、文件）中快速检索图像
  • 不适合消费者。我们可以限制浏览器，并要求用户进行特殊的设置和任务，但让我们尽量减少

IndexedDB 实现

  • 有一篇关于 IE、FF 和 Chrome 如何在内部实现这一点的优秀文章：http ://www.aaron-powell.com/web/indexeddb-storage
  • 简而言之：
    • IE 使用与 Exchange 和 Active Directory 相同的数据库格式用于 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/pmp/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

4 回答 4

26

结果 PNG 滑图的离线 blob 缓存

测试

  • 171 个 PNG 文件（共 3.2MB）
  • 测试平台：Chrome v24、FireFox 18、IE 10
  • 也应该适用于 Android 的 Chrome 和 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）
于 2013-01-23T17:14:04.520 回答
4

对于您的要求，我建议基于其他两个开发新的 polyfill： FileSystem API 到 IndexedDB和IndexedDB 到 WebSQL — 是最好的选择。

前者将支持在 Chrome (FileSystem API) 和 Firefox (IndexedDB) 中存储 blob，而后者应提供对 Android 和 iOS ( WebSQL ) 的支持。所需要的只是让这些 polyfill 一起工作，我想这并不难。

注意：由于我在网上找不到任何关于此的信息，您应该测试使用 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(" ")

来源

于 2013-01-01T21:38:12.900 回答
2

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

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

  • 对于站点文件（html、css、js 等），我更喜欢使用应用程序缓存。
  • 对于存储，我更喜欢使用 Indexed DB（支持 blob）、Web SQL（仅 base64）、FileWriter（支持 blob，但仅 chrome）。坦率地说，存储对此是个大问题。您需要将它们全部混合的最快的键值解决方案。我认为使用现有解决方案是一个不错的决定。
  • 为了获取，我使用了带有 CORS 的画布。但是我在考虑 WebWorkers 和 XHR2，这可能会更好，而不是 canvas，因为 canvas 在不同的浏览器和其他浏览器中存在一些与 CORS 相关的问题（例如，这个标题在 opera中存储错误）。

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

  • 缩放 - 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；
于 2013-05-24T09:16:45.663 回答
1

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

于 2013-01-01T19:18:18.620 回答