This is my first mobile application experience. A client of ours has requested developing an application that displays static data from his website in a mobile application. We are planning to use phonegap.
The application will only contain listings (ex: city attractions list) and pages (city attraction page). Should I use a database or just export my pages to html? Any suggestions?
From wikipedia:
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.
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.
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.
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.
If there are only static data/screens and are limited files lets say 50 files with total size of 2MB then it would be better to have them offline as html pages. As your client has asked to hold static data from his website in a mobile application.
But its better you first discuss with client for future upgrade possibilities and accordingly design App either fully Offline or partially Offline & online
Full Offline:
Half Offline & Half Online data:
HTML5 local storage encryption
Few things to optimize and increase App performance.
For more performance tips and ideas read Google PageSpeed.
Hope it would help you.
We had received a similar request for our application from the client.We were given a site http://www.gargashinsurance.com/ContactUs.aspx(The new site is not yet live,this is their old site) and our goal was to use most of its content in our mobile app.
We achieved it by using templates of Kendo UI(You can use any structure of your wish).Basically the application will issue a ajax call to the service and receive the data from the URL and store it in dynamically generated html page.
You can check out the app https://play.google.com/store/apps/details?id=com.payoda.Insurance It is available in all store IOS etc and developed using cordova.
We have also kept a json file and fetched data from it using local ajax calls to populate fields in the form which has details such as country list(as it is a long list and hardcoding them for dropdown box values is tedious).This works great for offline application
Our next version is an online application where we use phonegaps file reader concept http://docs.phonegap.com/en/1.3.0/phonegap_file_file.md.html ..What we did is basically read the json file from server if update are available and replace the json file available in local storage of phone else just use the json in local storage if app is offline or no update are available.
Bottom line is fetch data from a server if its an online application,and populate your html page.This way it easier to reflect upon the changes and you don't have to release an another version for every small change.A new version can be released for only the major functionality change.I suggest this method cause your data is never constant.
If its an offline application it better to export to an html page.But this is not good,cause every single update requires new version of the app
