Storing Image Data for offline web application (client-side storage database)

Results Offline blob cache for PNG slippy maps

Testing

• 171 PNG files (total of 3.2MB)
• Platforms tested: Chrome v24, FireFox 18, IE 10
• Should also work with Chrome & FF for Android

Fetch from web server

• using XHR2 (supported on almost all browsers) for blob download from web server
• I went with XHR2-Lib by Phil Parsons, which is very much like JQUERY .ajax()
  • https://github.com/p-m-p/xhr2-lib

Storage

• IndexedDB for IE and FireFox
• Chrome: Polyfill (blob stored using FileSystem API, reference kept in IndexedDB) polyfill
• 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/

Display

• I am using Leaflet http://leafletjs.com/ to show the map tiles
• I used the functional tile layer plugin by Ishmael Smyrnow for fetching the tile layer from the DB
  • https://github.com/ismyrnow/Leaflet.functionaltilelayer
• I compared the DB-based tiles layer with a purely local (localhost://) storage
• There is no noticeable difference in performance! between using IndexedDB and local files!

Results

• Chrome: Fetch (6.551s), Store (8.247s), Total Elapsed Time: (13.714s)
• FireFox: Fetch (0.422s), Store (31.519s), Total Elapsed Time: (32.836s)
• IE 10: Fetch (0.668s), Store: (0.896s), Total Elapsed Time: (3.758s)