将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清单存储在DB中
• MVVM和UI控件来自KendoUI(这次我没有使用他们精湛的网格控件,因为我想探索CSS3网格样式).
• XHR2来自:https://github.com/pmp/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,然后重新加载页面.

当您按"下载磁贴"时,会发生以下步骤:

• 清单是从DB中获取的
• XHR2 Fetch循环从GoogleDrive中获取PNG blob.
• 当循环运行时,它开始将Blob保存到PouchDB中.
• 注意:获取和保存在重叠的线程上(想象共同例程),因为这些(获取和存储)操作在不同的线程上运行异步.
• 完成Fetch循环后,它会报告已用时间.
• 注意:这次不是纯粹的Fetch工作,因为PouchDB putAttachments()是并行运行的.
• 保存所有Tile后,它将报告完整统计信息,并显示从PouchDB获取的磁贴.
• Blob-Rate每个png tile的总获取和存储时间

现在Chrome运行正常.Firefox非常慢.几个月后,当我使用原生的IndexedDB API时,我发现了这一点.所以我不认为这是一个PouchDB问题.可能更多是由于FireFox使用SQLlite,这是一种无SQL数据库的关系方法.

IE10无法正常工作.这很难过,因为我之前使用IE10进行的测试表明它有一个非常快的IndexedDB解决方案:为离线Web应用程序存储图像数据(客户端存储数据库)

• 关于"浏览器如何存储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/