使用 PouchDB 作为离线栅格地图缓存

Question

我一直在探索使用 PouchDB 作为栅格地图切片的离线缓存。具体来说，对于传单。我刚刚完成了一些初步测试，我想分享一下。

Answer 1

我创建了一个“JsFiddle”（实际上我最近更喜欢 CodePen），作为展示如何使用 PouchDB 缓存离线栅格地图切片的游乐场。

http://codepen.io/DrYSG/pen/hpqoD

它使用的算法如下：

• 测试是否存在 XHR2、IndexedDB 和 Chrome（没有 二进制 blob，但 Base64）。并显示此状态信息
• 从 GoogleDrive 获取 PNG 瓦片的 JSON 清单（我有 171 个 PNG 瓷砖，每个尺寸为 256x256）。清单列出了他们的名字和 尺寸。
• 将 JSON 清单存储在数据库中
• MVVM 和 UI 控件来自 KendoUI（这次我没有使用他们的 出色的网格控制，因为我想探索 CSS3 网格样式）。
• XHR2 来自：https://github.com/p-m-p/xhr2-lib/blob/master/test/index.html
• 我正在使用 PouchDB 的夜间版本
• 所有文件 PNG 文件都存储在 Google 云端硬盘（NASA 蓝色大理石。
• 我使用 Safe FME 2013 Desktop 创建了瓷砖金字塔。 http://www.safe.com/fme/fme-technology/fme-desktop/overview

在按下“下载磁贴”按钮之前检查清单是否已存储在数据库中，并且存在 171 个磁贴。如果您已经运行了测试，那么您的 PouchDB 将已经在 DB 中有磁贴，并且您将收到错误。在这种情况下，请按 Delete DB，然后重新加载页面。

当您按“下载瓷砖”时，会发生以下步骤：

• 从数据库中获取清单
• XHR2 Fetch 循环从 GoogleDrive 抓取 PNG blob。
• 循环运行时，它开始将 Blob 保存到 PouchDB 中。
• 注意：获取和保存在重叠的线程上（想想 协程），因为那些（获取和存储）操作正在运行 在单独的线程上异步。
• Fetch 循环完成后，它会报告经过的时间。
• 注意：这次不是纯 Fetch 工作，因为 PouchDB putAttachments() 是并行运行的。
• 当所有的 Tiles 被保存后，它会报告完整的统计信息，并且 显示从 PouchDB 获取的磁贴。
• Blob-Rate 每个 png tile 的总提取和存储时间

现在 Chrome 运行良好。火狐很慢。几个月前，我在做原生 IndexedDB API 时发现了这一点。所以我不认为这是一个 PouchDB 问题。可能更多是因为 FireFox 使用 SQLlite，这是一种非 SQL 数据库的关系方法。

IE10 不工作。这很可悲，因为我之前对 IE10 的测试表明它有一个非常快速的 IndexedDB 解决方案：Storing Image Data for offline web application (client-side storage database)

• 必读文章“浏览器如何存储 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/