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)