将PouchDB用作脱机栅格地图缓存

Question

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

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 Blue Marble。
• 我使用Safe FME 2013 Desktop创建了瓷砖金字塔。 http://www.safe.com/fme/fme-technology/fme-desktop/overview

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

按“下载磁贴”时会发生以下步骤：

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

目前Chrome正常运行。 Firefox非常慢。几个月后，当我使用原生的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/