2

I've been reading http://www.html5rocks.com/en/tutorials/offline/storage/

It sounds like the database is sandboxed. This is a problem for me, because the offline web app I've written - unfortunately one of the places it is being used is in has terrible mobile coverage and no wi-fi.

So what I'd like to do is write a native app which could grab the data from the IndexedDB database. Then maybe they can put it in an email, or plug it into a computer or something... it's very messy but I don't really have any other options.

Any ideas welcome.

b85411
  • 9,420
  • 15
  • 65
  • 119

1 Answers1

1

Instead of creating a native app, why not create an offline web app? That way you can continue using the IndexedDB database, but won't have to worry about connectivity.

The way to accomplish this is by using JavaScript Service Workers, which act as a proxy between the browser and the network. After you register a service worker, whenever the user requests a page from your site, the service worker springs into action.

So for instance, every time the user loads a page from your site, the service worker will check if there is internet connectivity, and if not, load the page entirely from the browser's cache instead of making a web request for the page. That way you can effectively create a website that works entirely offline after it's been loaded only once. Neat!

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
  • Yeah, I've already written the offline web app. The issue is there is a lot of data stored because I am storing base64 image data. So because the internet connection is poor to non-existent, I try to "sync" say 1,500 KB of data... it just won't work. In other locations where the internet is fine - no problem at all. But I need to figure something out for this location with bad coverage. – b85411 Aug 07 '15 at 04:43
  • @b85411 Use the `Cache` interface of the Service Worker to sync all that data beforehand, like you would with a native client. Then the Service Worker can retrieve it as needed from the cache instead of from the web again. – Maximillian Laumeister Aug 07 '15 at 04:52
  • I can't sync it before hand. The data is on the client (web app) - and I need to sync the data back to a server. – b85411 Aug 07 '15 at 05:03
  • Are you saying you won't be able to get users to download your app at all? – Maximillian Laumeister Aug 07 '15 at 05:14
  • No... they load the web app on to a mobile device, that's fine. But within the app they fill out forms, take photos, etc. All this data is stored in the IndexedDB database so it can be all used offline. There is a sync button, which they press to send a JSON representation of all the saved data to a server. My dilemma is what to do when there is poor mobile coverage, and they've got all this saved data which they cannot sync. How do I get this data out of the mobile device? – b85411 Aug 07 '15 at 05:35
  • @b85411 Why not save the data from the web app to a file? It would appear as a download to the user, then they could do whatever they want with the file. – Maximillian Laumeister Aug 07 '15 at 05:41
  • I would not be against that idea. How can I do that from the web app though using pure HTML and JS? – b85411 Aug 07 '15 at 05:42
  • @b85411 Use [Downloadify](https://github.com/dcneiner/Downloadify) to save text (like JSON converted from your IndexedDB) from a web page into a file. [Demo here](http://pixelgraphics.us/downloadify/test.html). There might even be a way to save directly from the IndexedDB, not sure. – Maximillian Laumeister Aug 07 '15 at 05:47
  • @b85411 Here's a related thread, by the way: https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file – Maximillian Laumeister Aug 07 '15 at 05:50
  • Found something better: https://stackoverflow.com/a/12718755/2884981 - no Flash required. – b85411 Aug 07 '15 at 07:55
  • @b85411 You can also use [Filesaver.js](https://github.com/eligrey/FileSaver.js/) if you want a plug-and-go solution. And if you found my answer helpful, don't forget to mark it as accepted. Thanks! – Maximillian Laumeister Aug 08 '15 at 20:57