3

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

4

1 回答 1

10

我创建了一个“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/pmp/xhr2-lib/blob/master/test/index.html
  • 我正在使用 PouchDB 的夜间版本
  • 所有文件 PNG 文件都存储在 Google Drive (NASA Blue Marble.
  • 我使用 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 获取的一个 tile。
  • 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)

于 2013-05-23T18:33:10.833 回答