Storing Image Data for Offline Web Application (Client-Side Storage Database)

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)

Storing and Managing offline data in Web apps

The feature you're looking for is the Background Sync API.

You could use workbox-background-sync to make usage easier, including a built-in polyfill for the behavior on browsers that don't support the Background Sync API.

What methods are there to store data offline in a web-app

Well you could use Flash shared Object storage, which will allow between 0 and unlimited space. Check this settings panel for details of your own settings to get a better idea of what I mean.

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html

Of course this does mean that the user will have to allow third party flash content to be stored locally, which is the default. Also the default storage space is 100KB, with the user being prompted to allow for a larger amount unless they have previously increased the default themselves. So that's a small draw back, but still workable.

I am not sure how you would access the shared object from within a silverlight app, as I have only used it via a Flash swf. I will do some digging around using javascript and get back to you on that.

Also there is another post that may help you:

Javascript bridge to Flash to store SO "cookies" within flash

Which HTML5 offline storage solution should I use for storing user notes in my web app?

localStorage is by far the simplest solution and it's the one you should use for this task. It allows you to store strings, so as long as your data can be represented as strings - it will work (usual practice is to convert non-string data to json before saving, then parse is back).

WebDB is your normal database. If you need to run complicated queries on your data across multiple tables, then you can use it. For storing notes it would be an overkill.

Application cache is something completely different, I don't see how you can apply it here. It is for caching html pages and resources.

Store user's images in a web application

Store them in the file system. It's faster and simpler. Often, when accessing an image, you're going to have to save it to a file anyway before you can utilize it. You can examine the images with third party tools. You can store the recordID in the filename to keep the image/record association from ever being broken.

Many others share this opinion: http://forums.asp.net/p/1512925/3610536.aspx

---

Related Topics