Using PouchDB as an offline raster map cache

Question

I have been exploring using PouchDB as an offline cache for raster map tiles. Specifically, for Leaflet. I have just finished some preliminary tests which I thought I would share.

Answer 1

I have created a "JsFiddle" (actually I prefer CodePen these days), as a playground for showing how to use PouchDB to cache off-line raster map tiles.

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

The Algorithm it uses is as follows:

• Test for presence of XHR2, IndexedDB, and Chrome (which does not have binary blobs, but Base64). and show this status info
• Fetch a JSON manifest of PNG tiles from GoogleDrive (I have 171 PNG tiles, each 256x256 in size). The manifest lists their names and sizes.
• Store the JSON manifest in the DB
• MVVM and UI controls are from KendoUI (This time I did not use their superb grid control, since I wanted to explore CSS3 Grid Styling).
• XHR2 is from: https://github.com/p-m-p/xhr2-lib/blob/master/test/index.html
• I am using the nightly build of PouchDB
• All files PNG file are stored on Google Drive (NASA Blue Marble.
• I created the tile pyramid with Safe FME 2013 Desktop. http://www.safe.com/fme/fme-technology/fme-desktop/overview

Before Pressing the button "Download Tiles" Check to see that the manifest has been stored in the DB, and that 171 tiles are present. If you already ran the test then your PouchDB is going to already have tiles in the DB, and you will get errors. In that case, Press Delete DB, and then reload the page.

When you press "Download Tiles" The following steps occur:

• The Manifest is fetched from the DB
• A XHR2 Fetch loop grabs the PNG blobs from GoogleDrive.
• As loop runs, it starts saving the Blobs into PouchDB.
• Note: Fetching and Saving are on overlapped threads (think co-routines), since those (fetch & store) operations are running async on separate threads.
• When the Fetch loop is done it reports the elapsed time.
• Note: This time is not pure Fetch work, since PouchDB putAttachments() are running in parallel.
• When all the Tiles are saved, it will report full statistics, and display a tile fetched from PouchDB.
• The Blob-Rate the total fetch and store time per each png tile

Right now Chrome is running fine. Firefox is very slow. I found this out a few months when I did a native IndexedDB API. So I don't think this is a PouchDB issue. Probably more due to FireFox using SQLlite which is a relational approach to a no-SQL DB.

IE10 is not working. This is sad, since my prior tests with IE10 shows it has a fantastically fast IndexedDB solution: Storing Image Data for offline web application (client-side storage database)

• A Must read article on "How the browsers store IndexedDB data" http://www.aaron-powell.com/web/indexeddb-storage
• Note: FireFox uses SQLlite for the NOSQL IndexedDB. That might be the reason for the slow performance. (blobs stored separately)
• Note: Microsoft IE uses the extensible storage engine: http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• Note: Chrome uses LevelDB http://code.google.com/p/leveldb/