Use phone code in online site

Question

I have a Twitter Bootstrap based site. With some additional improvements, it works great on phones and tablets. But I want a real application for myself and I do not want to duplicate everything. For starters, just for Android.

The first thing I tried is AppsGeyser, which is pretty easy, but not quite what I want. If the user does not have an Internet connection, I see these ugly messages in the browser. And if the user presses the menu button on his phone, I want the menu from the "menu bar" to switch to Twitter Bootstrap. Therefore AppsGeyser is not what I want. And iOS support is not supported.

Next I tried a lot with PhoneGap, fantastic! All I want is possible, but how and what is the best solution? What I want is to follow my opinion:

• If the application launches an Internet connection check, is there a connection? Download from cache. Just just show the site. Best HTML5 cache picker? It is played with it, but I only want to download from the cache if there is no Internet connection. So far, it seems like it's impossible ..?
• If any form is submitted, check again if there is an Internet connection, there is no Internet connection? Just a warning: "no internet connection!" and don’t send the form to still fill out as the user has just done. On click / submit => ajax call to site => fails? => show alert => return false, so the form will not be submitted. The best choice?
• The last thing I want, as I said, when the user presses the menu button on his phone, switches the "menu bar" from Twitter Bootstrap.

So, the first two things are not a problem, I think, but the last ...? I found this: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#menubutton Not a big deal if the site is “in the app”, but I don't want the site “in the app”. Just download it from the Internet (or cache if there is no internet connection), so if I change something, I don’t need to change the site and application. Just a website! But is it possible to use Cordoba on the "remote" website? If the website works through the PhoneGap application, it starts and works !?

How if I put this code on my site:

document.addEventListener("menubutton", onMenuKeyDown, false); function onMenuKeyDown() { alert('Menu button pressed!'); } 

And include the cordova js file, it does nothing for ordinary visitors, but if the application is used and the site is downloaded from the PhoneGap application with web browsing, does it work?

Please, you appreciate all this!

Thanks!

Answer 1

For me, the approach to this book in PhoneGap is to write the application as a stand-alone JavaScript / HTML / CSS application that can sit on the device and retrieve data from a web service on the server side. This requires a concerted effort and, as a rule, reverse engineering, a traditional server-side web application (which seems to be what you are describing) is not so simple. This model gives you excellent performance and allows you to update application content without releasing an update.

I think it’s best to rewrite the presentation level of your application as a JavaScript application based on the API derived from your source code. This should give you excellent performance, which is important if you are competing with other native applications. Plus, if you build it correctly, it will give you stand-alone functionality and much more (caching, logging, etc.).

A quick approach (but probably not the one I would recommend) would be to pack only the home page (HTML / JS / CSS) on the device, and then just link to your web content as usual. This is not the approach I used before, but should work just fine. If you want to create stand-alone functionality combining this approach with a toolbox like jQuery Mobile, it should work well (jQM will not provide stand-alone functions for each sae, but should provide you with a suitable basis for creating your own stand-alone processing).

Hope this helps!