How to save/load data Online(Store data with AJAX and JSON) and Offline (locally)

I need help figuring out the best, cross-browser compatible way to "SAVE" user input and STORE them locally(offline mod) AND on a server(online). Program will be used by Android and iOS.

I want to know the best way to track user progress while the device is online O开发者_运维问答R offline.

Hello I have been researching AJAX, JSON, XMLHttpRequest, REST, Java, and HTML5 (specifically, localStorage).

The scenario: (Read a book online/offline, save page progress)

1. A user logs in to a Web Service and the Web Service allows the user to download an "html webpage book" (view with HTML5 browser).

2. After every page turn, a REST API uses a GET request to post the Progress data to a Web Server. Simultaneously, a JSON string is created and saved in a file on the server. (let's say "ProgressData.txt")

3. In the background, a separate "copy" of ProgressData.txt is saved LOCALLY on the mobile device. The user then leaves the internet connection and continues to read the HTML Book.

4. When the user regains connectivity, the ProgressData.txt is uploaded to the server using a REST API where it will update the old server file with the NEW .txt file with all of the user ProgressData.

Possible solutions:

HTML5 localStorage solution looks good. jQuery even simplifies it: http://plugins.jquery.com/project/html5Storage

Straight Javascript looks good for Server-Side storage, however it doesn't have access to a mobile device's physical hard-drive, thus preventing any kind of offline saving.

Java applets look possible. Plus not sure how Java runs with Android/iOS.

I don't want to have to run a localhost(PHP/Apache/Python) from a mobiledevice every time the user goes offline, however that may be where the solution lies. I did stumble on this powerful tool: http://couchdb.apache.org/

Question:

I need to know the best way to track user progress while the device is online OR offline. What is the best way to do this?

I stumbled across store.js the other day which might help solve the cross browser local storage. It was from this article about local storage.

I think your best option for tracking online/offline is to ping the server via an AJAX call when the page is turned. Always try and update the server on a page turn, but if it fails, handle the failure and store the progress locally. Each page turn will either amend the locally stored progress file or if connection is restored then simply update the server with the progress.

The issue I am thinking might occur is if a book is finished offline then there are no more clicks that would trigger the syncing, regardless of a restored connection. You may want to think about a manual sync link/button at the end of a book. Or maybe have a manual sync available at all times anyway? Give some control to the users and describe the whole offline/online reading scenario. You might find that it is easier to just let the users do the work… if they don't sync then it's their problem!

Here are 2 screencasts what will help you with your problem.

They are in Ruby on Rails but maybe you can get the idea. It is using the html5 cache manifest.

Hope it will help you!

http://railscasts.com/episodes/247-offline-apps-part-1

http://railscasts.com/episodes/248-offline-apps-part-2

some more resources (sorry i dont have experiences myself with html5 cache manifest)

http://diveintohtml5.ep.io/offline.html

http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

I'd suggest just using a cookie to store the current state. That way it is automatically sent to your server with every user request (so no need to build out a custom server-side API for receiving the state after a lost connection, and no need to have any custom client-side code for sending the data to the server), and still updateable even if the user has lost Internet connectivity. Also it doesn't rely on HTML5 features, so you don't need to restrict people to HTML5-capable browsers.

In any case, the best way to handle storing the current state would be to have a simple onclick handler on your "next page" link (or button, or whatever it is) that calls a function and sets the cookie value to whatever the current position is. Note that because the state is always available client-side, and sent to the server on every request, there is no need to maintain any explicit copy of the state server-side, unless you want to be able to remember the user's place even when they manually delete their cookies (which is overkill in my opinion).

You may want to look at the W3C Example Code for setting/getting cookie values in JavaScript.

Also, here's a website that demonstrates functionality similar to what you want to build. It uses cookies to keep track of a user's place when reading various webcomics. Pretty much the same as what it sounds like you want, except with comics instead of books.

It would be wise to track the progress in both a server side database and in the client's local storage if a constant internet connection is not necessary.

Evercookie is a controversial javascript api that aims to provide local storage using any means available including standard cookies, Flash shared object, Silverlight, browser history and HTML 5 storage. Data should persist when the user is offline and when the connection is restored, sync the cookie and database with whichever data has greater page number for the given book. Droid has Flash and the Flash shared object data is a "cookie" available to both desktop and web-based apps.

With great power comes great responsibility: http://samy.pl/evercookie/