How to save / load data on the Internet (save data using AJAX and JSON) and offline (locally)

Question

I need help in determining the best cross-browser compatible way of user login "SAVE" and STORE them locally (offline mod) and on the server (online). The program will be used by Android and iOS.

I want to know the best way to track user progress when the device is connected to a network or offline.

Hello, I studied AJAX, JSON, XMLHttpRequest, REST, Java, and HTML5 (specifically localStorage).

Scenario: (Read the book online / offline, save the page)

• The user logs in to the web service, and the web service allows the user to load the "html web page page" (view with HTML5 browser).

• After each page turn, the REST API uses a GET request to send Progress data to the web server. At the same time, a JSON string is created and stored in a file on the server. (let's say "ProgressData.txt")

• In the background, a separate “copy” of the ProgressData.txt file is saved by LOCALLY on the mobile device. The user then leaves the Internet connection and continues to read the HTML book.

• When the user reconnects, the ProgressData.txt file is uploaded to the server using the REST API, where he updates the old server file using NEW.txt with all ProgressData users.

Possible solutions:

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

Direct Javascript is well suited for server-side storage, however it does not have access to the physical hard drive of the mobile device, which prevents any offline storage.

Java applets look possible. Plus I'm not sure how Java works with Android / iOS.

I do not want to run localhost (PHP / Apache / Python) from mobiledevice every time the user goes offline, however this may be the solution. I came across this powerful tool: http://couchdb.apache.org/

Question:

I need to know the best way to track user progress when the device is connected to a network or offline. What is the best way to do this?

Answer 1

Here are 2 screencasts to help you solve your problem.

They are in Ruby on Rails, but maybe you can get this idea. It uses the html5 cache manifest.

Hope this helps you!

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

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

some additional resources (sorry, I have no experience with the html5 cache manifest)

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

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

Answer 2

The other day, I came across store.js , which can help solve the cross-browser local storage. This was this article about local storage.

I think your best option for tracking online / offline is a ping server through an AJAX call when the page is rotated. Always try to update the server when you turn the page, but if it fails, handle the failure and save the move locally. Each page turn will either be modified by a locally saved progress file, or if the connection is restored, just update the server with the progress.

The problem that I think may happen is if the book is completed offline, then there are no more clicks that could initiate synchronization, regardless of the restored connection. You might want to think about the manual link / sync button at the end of the book. Or maybe manual synchronization is available at any time? Give some control over users and describe the entire offline / online reading script. You may find it easier to just let users do the & hellip; if they do not sync, then this is their problem!

Answer 3

I would suggest using a cookie to store the current state. Thus, it is automatically sent to your server with each user request (therefore, there is no need to create a server-side API for receiving the state after a lost connection and there is no need to have any user client code to send data to the server), and that's it still updated, even if the user has lost their Internet connection. Nor does it rely on HTML5 features, so you don’t need to restrict users to HTML5 compatible browsers.

In any case, the best way to deal with maintaining the current state should be to have a simple onclick handler on your next page (or a button or whatever) that calls the function and sets a cookie value for the current position. Please note that since the state is always available on the client side and sent to the server for each request, there is no need to maintain any explicit copy of the state server part if you do not want to remember the user's location even if they manually delete their cookies (that, in my opinion, too large).

You can see the W3C sample code for setting / getting cookie values ​​in JavaScript.

In addition, here is a website that demonstrates functionality similar to the one you want to create. It uses cookies to track the user's location while reading various web comics. Pretty much the same as it seems to you as if it weren’t for comics, not books.

Answer 4

It would be wise to track progress both in the server-side database and in the local client repository if a permanent Internet connection is not required.

Evercookie is a controversial javascript api whose purpose is to provide local storage using any available means, including standard cookies, a common Flash object, Silverlight, browser history and HTML 5 storage. Data should be saved when the user is offline and when the connection is restored, synchronize the cookie and the database with which data has a higher page number for this book. Droid has Flash and data about common Flash objects - this is a cookie that is available for both desktop and web applications.

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