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

Question

I have an offline web application using appcaching. I need to provide it about 10MB - 20MB of data that it will save (client-side) consisting mainly of PNG image files. The

Answer 1

I have map caching examples(open example, discover regions and zooms, switch offline and discovered regions will availaible).

There are map.js - map layer for offline tiles, storage.js - storage implementation based on IndexedDb and WebSQL (but this just test implementation with poor performance).

• For site files (html, css, js and etc.) I prefer use application cache.
• For storage I prefer use Indexed DB (support blob), Web SQL (only base64), FileWriter (support blob, but only chrome). Frankly storage is big issue for this. You need the fastest key value solution that will mix them all. I think is good decision to use exist solution.
• For fetching I used canvas with CORS. But I thinking about WebWorkers and XHR2 and this can be better instead canvas because canvas have some troubles with CORS in different browsers and other (for example this title was stored bad in opera).

Additional information about sizes for 2 billion city (Minsk):

• Zoom - 9, tiles - 2, size - 52 kb, with previous - 52 kb;
• Zoom - 10, tiles - 3, size - 72 kb, with previous - 124 kb;
• Zoom - 11, tiles - 7, size - 204 kb, with previous - 328 kb;
• Zoom - 12, tiles - 17, size - 348 kb, with previous - 676 kb;
• Zoom - 13, tiles - 48, size - 820 kb, with previous - 1.5 mb;
• Zoom - 14, tiles - 158, size - 2.2 mb, with previous - 3.7 mb;
• Zoom - 15, tiles - 586, size - 5.5 mb, with previous - 9.3 mb;
• Zoom - 16, tiles - 2264, size - 15 mb, with previous - 24.3 mb;