cross browser html5 offline data storage? - html

I am currently looking to write a web app in HTML5. It is my first HTML5 web app.
The main feature of this app is its offline feature. When I mean offline, it will be something like C:\APP\index.html (for Windows ), and it will be the same thing for Mac. So with that said, I have been looking into LocalStorage, WebSQL, IndexedDB.
And I come to this conclusion that LocalStorage is not going to be good enough for the web app that I am going to write. The IndexedDB only for all the major browsers except safari. Safari (desktop & iOS) supports WebSQL not IndexedDB. And then I found out that WebSQL is not going to be supported.
So I am wondering if there is a "universal" solution to my dilemma? Or Should I have code IndexedDB and WebSQL so that it will work on all the browsers? Any suggestions are welcome.

Your app is the only thing that needs to be accessing the data it stores, right? If so, data is data is data, and as long as you include everything you need to read, write to, and understand the information your data encodes, it doesn't matter one bit (no pun intended) what format you use to store it. Whatever language you are using to create the app, it will have library functions that can manipulate stored data.
If worst comes to worst, you can always go with the lowest common denominator and use a raw binary or text file; those are the only true universal formats.

Related

HTML5 local database - is there a solution that will work in all browsers?

Trying to write a website/webapp , should work both on desktop and mobile.
I will need a client side database support, but could not find a solution that would work both for popular browsers (FF/IE) and also on iOS.
It states everywhere that I should either go for IndexedDB or Web SQL - but I want full support and I don't want to use two databases depending on the client machine.
I know this question might be duplicated, but I could not find an answer with a reliable substitute for the IndexedDB - Web SQL solutions.
Any advice ?
The database should store a lot of textual data and should also textual search.
You can go with IndexedDB way with using IndexedDBShim (a polyfill for WebSQL, it works well on iOS devices ) as well. IndexedDB has a decent support now in both desktop and mobile browsers.
For storage quota, notice that IOS devices allows maximum of 50 MB storage, whereas on other browsers there is no hard limit.
IndexedDB doesn't have any free text search API. You need to build it on your own, or look at this library YDN-DB. This may prove helpful for you !!

Reliability of HTML5 Localstorage for storing offline data in mobile application

I am developing a mobile application using Sencha Touch. My app needs to store some data (which comes from a database, in JSON format) in the device itself, so that the app retains its previous state if it's closed and rerun.
Is HTML 5 localstorage the best possible solution?
What are its limitations/shortcomings?
If I delete the browser cookies, will I also lose the locally saved data?
What alternative do I have other than to save in web browser's cache?
LocalStorage is a viable solution, along with IndexedDB. LocalStorage is supported in more browsers, but only supports storage of strings in Name/Value pairs. Here are the support tables:
LocalStorage Support
IndexedDB Support
Another option would be SequelSphere, an HTML5 Relational Database Engine that uses LocalStorage and IndexedDB to store its data. It also has an Extension for Ext JS 4 (Sencha's big brother), and a Sencha Extension in the works. Even without an extension, it can store your data locally, provide SQL access, and put the data in a form for easy use by Sencha. As a disclaimer: I work for SequelSphere. That's how I know a Sencha extension is in the works.
When it comes to reliability, all forms of client side data storage are reliant upon the end user not clearing the data from their browser. Please note: this is usually a different option than clearing the browser's cookies.

html5 to store greater than 50 mb worth of data?

I am building a mobile app that must work in Blackberry, iPhone and Android phones. I am building this mobile app in HTML5, CSS and JQuery Mobile. Then I will use PhoneGap to allow the code to run as a native mobile app for the phone. The mobile app must be able to work without connection to the internet. The only time the app must require an internet connection is when it loads for the first time, because that's when the app will download over 50 MB worth of data. Next time the app has internet connectivity, it will poll the server for more recent data to consume.
My problem lies in where do I store 50 mb worth of data which can be updated when internet connectivity exists?
Additional Notes
I've been discouraged by others to use Web SQL Database because the specification is no longer in active maintenance. I've read that localStorage and cache manifest has a storage limit of about 3-5 mb depending on the browser. From experience, I've encountered a lot of challenges working with the PhoneGap API to create one set of code that will reliably write to all of the following file systems: ios, bb, android.
Based on your needs: (store 10,000 images, 10,000 pdfs, +videos etc.) I don't think a "lightweight" HTML5 application is going to suit your needs.
I think that a native application is likely going to work much better where you have proper filesystem access to store the files on the device as needed (and even structure them better).
The HTML5 localStorage (5mb) and the WebSQL (SQLLite) (5mb-~50mb) database options really won't give you what you need as far as I can tell.
WebApp "wrappers" like PhoneGap and WebWorks (for BlackBerry) will give you the filesystem access you need, but I'm not sure if either of them have limitations that you'll hit size/quantity wise... hopefully someone with experience in these wrapper frameworks can indicate any size limits they've encountered.

Build HTML5 offline app with bunch of multimedia content

I just wanted to hear opinions.
I know that now it is not really possible to build a native (desktop, tablet) like web app that contains (should work in offline mode with) a bunch of multimedia content (there is no consistent way to store and access multimedia data on the client).
Do you see any steps in this direction or such apps will be a native platform privilege in future as well?
Offline storage appcache does more or less what you are asking for. It's actually quite possible, at least in modern browsers. Check it out:
http://html5doctor.com/go-offline-with-application-cache/
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache
https://developer.mozilla.org/en/Using_Application_Cache#Browser_Compatibility
In addition to offline storage, there are HTML5 File APIs that you can use. I believe Google Chrome lets its form of 'Apps' use the file APIs.
http://dev.w3.org/2006/webapi/FileAPI/

Best way to implement offline storage for web application (work on all browser + tablets )

I wonder about the best way to implement offline possiblities for a web application. I have searched the web but couldn't figured out what currently the best way is to create a web application offline (and will work in the future)
The lay-out of the web application i can save with Offline Application Caching...
But the problem is that i have a lot of key-value data that i need to store offline. With localStorage, sessionStorage the limit to save data offline is 5MB...And that's not enough...
I seach for the following things:
Gears from Google: not supported anymore
Web SQl database: not supported anymore
IndexedDb HTML5: not supported by all browsers (only chrome and firefox). I think this is currently the best way...
Is it possible to increase the Offline Application Caching and save the key-value data in a text format witch offline application caching??
https://github.com/marcuswestin/store.js is mature (~2 years), still updated and works in an amazing array of browsers.