Mobile app for web application (offline storage)

Question

I hope this question belongs here. I am developing a web application for a client. It involves creating appointments/quotes for tradesman and need some advice.

Basically there are products that can be added to a quote created on the webapp. I want to be able to select the quote on the mobile app from a smartphone a fill out the quote.

The problem I face is that because there might not always be internet connectivity I need to store quote data offline on the device so that it can be synchronised when there is internet.

Here is the process using the mobile app:

1. User gets appointments from web application and stores them (preferably in a database)
2. Even with no connection user can then fill out quote on the appointment.
3. User saves quote
4. Mobile app automatically sends new quote to web application (if connection)
5. When internet is available user manually synchronises data

The web application takes care of creating appointments and managing the products. The mobile device stores it's own copy of the products and simply just a reference to the quote.

So the user can see a list of appointments. Selects the appointment and then begins to add products.

appointments

appointment_id

description

products

id

description

quote

id

appointment_id

product_id

The web application has been developed in PHP.

I'd like to take advantage of HTML5's offline storage for the mobile app as I'm a web developer and don't have time on this project to learn a native language (i.e objective-C). I've read in a couple of places that web SQL database is not going to be continued so I'm not really sure what my options are.

Also for code in thinking HTML5 and JavaScript, so probably using jQTouch or jQuery Moble.

If anyone has any suggestions or recommendations for me that would be great!

Answer 1

I have a jQuery Mobile app which stores data off-line. Users push completed records up to a web service when connected (the app also uses the off-line capabilities in HTML5). This uses Web SQL (which is SQLite in WebKit and Opera) in Mobile Safari, and works well on the principal devices (iPad / iPhone) but is also fully functional in Chrome and Safari on the desktop (I haven't tried Opera, but obviously it wouldn't work in Firefox or IE).

A few considerations:

• As you point out, Web SQL has a somewhat uncertain future. You might want to look at IndexedDB instead, although depending on the browsers you need to support Web SQL might just be fine.
• Local database size is limited, but you should be OK if you "purge" data flagged as complete and submitted every so often (I think it's 5MB per db or thereabouts, so quite considerable).
• My app talks to a SOAP web service via ajax, and we're all on the same domain. You may need to look at CORS / reverse proxies and such if domains are going to differ
• I don't like fiddling with XML in Javascript, but XMLObjectifier makes that side of things easier (parses XML into JSON objects)

Answer 2

PhoneGap applications use HTML5 and CSS3 for their rendering, and JavaScript for their logic

What that mean is that you have two possibilities, whether your client's data in your application is meant to be modified without an application update or not. Since I cannot determine that from the information you gave in the question, I'm going to detail the answer for each case.

---

If your client's data does not need to be updated (without an update of your application)

In this case, you consider your client's data to be static. The provenance of this data is not relevant, as you will include it in your application data, like any other text or image (or other asset), before distributing your application. That means that the listings of your client will be tied with your application, and that modifying them will require to update your application.

Technically that means that you will simply add your client's data as a static file. It can be HTML5 code, right in the middle of your own application code, or it can be any kind of file (for instance Json), that your application will have to parse and display (using JavaScript).

However, if you go for the HTML5 solution, for maintainability purposes (and maybe other reasons), you will probably want to separate the content from your client from the content from your application. To do so, create an HTML5/CSS3 page which contains your client's data, and include it in your application's page(s) using that method (or you can use the pager.js library as mentioned in this answer).

As a side note: the next method will perform as well as this one in the present case; with the downside of being a bit more complex.

If your client's data needs to be updated without an update of your application

In this case, you consider your client's data to be dynamic. The provenance of the data is relevant, as only the method to fetch the data will be stored in your application: the rest will be done by the device which will execute your application. While more complicated to achieve, this method has the advantage of allowing a constant update of the data without requiring an update of your application.

Technically that means that you will describe your application layout and (graphical) design in HTML5/CSS3, and that you will code your application behavior (fetching your client data, storing it, querying it, displaying it, etc.) in JavaScript.

To do so, you will need to fetch your client's information using JavaScript (embedded in your application's HTML5 files) and then use JavaScript again to store these information in the PhoneGap Storage. Then, your application will also need to query the PhoneGap Storage (still using JavaScript) to access the stored information and to display it, according to the layout/design described in the HTML5/CSS3 files (probably the HTML5 skeleton in your application for your client data logical layout, with CSS3 ids and classes for its design/appearance).

It is worth noting that if you have an always-online device, as long as your client's website is up, you don't need to store the listing information in your application. But if your client's website goes down, or if the device goes offline, you will need a local storage.

Bottomline

In other words, if your application never requires an Internet connection to work, it is safe to include the listings within the HTML5/CSS3 data; otherwise, you will need to go for the JavaScript/PhoneGap Storage solution, even though it's more complex.