Does Cordova/PhoneGap only support single page mobile apps

Question

After reading its tutorials, I still feel confused. Do I need to include the cordova.js and initialize the app.initialize(); on each single page? Or as long as the index.html is loaded, I wouldn't need to include cordova.js and init it on any other pages?

Solution 1

It depends! If you are using Cordova in companion with jQM or any other ajax-like frameworks, it is NOT necessary to load cordova.js on each page. It is only necessary to load it in your index.html and it will stay there available even if you change the page in another html.

The reason is that in jQM things are loaded in ajax like fashion and they stay in the DOM, that is why the cordova library is available through the DOM life. If you include cordova.js on each page you will have multiple declarations and that could lead into problems. Be aware of that.

I have been working in an app using single page apps, each page on an independent HTML, which was benefitial for our purposes for mantainability and it allow different people to work on other pages without messing all in just one file. We just load cordova and other common libraries in the index.html and all is working fine. For specific pages that requires special code, I load the required scripts for each page, so the library code does not remain in the DOM when other I change pages, to keep the DOM as light as possible and clean.

If you want to include cordova on each page, just be aware yo check first if the library is not already loaded. What I do recommend it to check for the deviceready event in all pages just to stay safe.

Single or multipage app development decision depends on your needs and situation.

Solution 2

In mobile devices is crazy to load everything each time, especially if haven't wifi connection.

Take a look on this, is very simple way to make modular app with one only html: https://github.com/charnekin/api

Solution 3

Yes. You have to include the cordova.js on each page. Although you don't need to subscribe to Cordova-related events on each page if you don't need access to device-specific functionality on that page and you could use regular HTML pages with combinations of JS and CSS. Although this is possible, this is not recommended way to do things in Cordova applications, since each time you will navigate to new page, user will notice that. The Cordova 'best practices' is to use Single Page Application and don't use multiple pages for different screens.

You could look at article at the link http://floatlearning.com/2011/03/developing-better-phonegap-apps/ for another set of good advices which take in consideration when start working with Cordova

Comments

[Dawson Loudon]

Single page apps are a 'best practice'. Yes, if you move to another page you have to reload everything, that is why it's best practice to use single page. You get a more native feel with single page apps.

[pppontusw]

Yes, don't use multiple pages. You will probably not get an app through to the AppStore if you use multiple pages

[Franva]

Thank you very much for your answer. After reading your reply another question comes into my mind : if we have to keep all "pages" in one single page, then that html page will become bigger and bigger and harder to maintain. So what's the solution for this problem?

[Franva]

Or do you know any html+javascript+css module/layout/framework which can simplify the complexity of a single-page app? Like how do you show the transit of different "pages"/views in one singe html page?

[Franva]

Hi VicM, thank you for your answer, it's really helpful. When you say: using Cordova in companion with jQM, I don't need to load Cordova on each single page as they stay in the DOM..." So, my question is :How to put Cordova in the DOM with jQM? Could you please provide me a complete example? Thanks

[VicM]

Just include it like any other js library as you do it on any webpage inside your index page, that's all. Using the HTML <script ....></script> tag. I am not at my computer but let me know if you beed further help.

[codevision]

The good practice would be to load packaged HTML for pages/views using AJAX and inject them in the DOM dynamically. This should helps with browsers reflow. You could use jQuery Mobile (jquerymobile.com) if you need basic UI. If you need heavy graphics and animations, probably Zepto(zeptojs.com) is very good choise for replacing jQuery.

[Franva]

I still feel confused about the underlying mechanism. If I use jQM with Cordova, how jQM stores the functions, plugins in its DOM? And where is the DOM after you jump to another page? One html page has one DOM, so how does the second page know the first page's DOM?

[VicM]

I strongly recommend you reading the jQM documentation (basics) as well as the basic DOM one to understand that. It is a broad question but doc you clarify that. IMHO the best for you is to actually start coding something simple and read the doc so you fully understand what is happening.

[VicM]

I will try to point you to specific pages once I find them, meanwhile it is worth reading about DOM.

[Franva]

Hi VicM, thx for your help. I know what is DOM, what I want to know is how jQM stores Cordova stuff in DOM even it's on the different pages. As I know, html is stateless and therefore cannot carry infomation without some plugins/methods/ways etc. So I want to see how this is done in an example and better with some documents. thanks again

[Franva]

Hi VicM, could you please provide a full example/download link which shows how to develop a multi-page Cordova app? Thank you very much!

[CrandellWS]

understanding that single pages are ideal for most apps...I needed pages to reload for updates and rather than writing php and JavaScript I used multiple pages...once I stripped the header tagsand removed secondary calls to Cordova.js all worked fine...

[Franva]

@CrandellWS sounds exciting! could you please provide a full example of code? thanks!

[CrandellWS]

@Franva I have switched and now am using Sencha Touch...but I clearly remember Phonegap was failing to until I removed the "<script src='cordova.js' type='text/javascript'></script>" from everywhere except the main index.html file...

[Franva]

hi @CrandellWS I guess you are right. I am using Sencha Touch as well. I think we can only have one cordova.js reference in the project...