{"id":726,"date":"2013-03-24T10:34:12","date_gmt":"2013-03-24T05:04:12","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=726"},"modified":"2013-03-24T10:34:12","modified_gmt":"2013-03-24T05:04:12","slug":"creating-phonegap-aware-web-browser","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/creating-phonegap-aware-web-browser\/","title":{"rendered":"Creating PhoneGap aware Web Browser"},"content":{"rendered":"

I wanted to create an application which I could use to run my other PhoneGap applications for testing, a kind of wrapper or shell application. When you are developing a PG application, you are changing you code frequently and running the application again and again in the emulator could be time consuming (actually it is very slow for Android, but iOS is quite fast).<\/p>\n

So this week I create a PhoneGap application which can take a URL of my PhoneGap application hosted on my development server and run it. The shell\u00a0application\u00a0is like a regular web browser where you enter the URL to open the page. However you cannot execute PhoneGap applications in a regular mobile browser (such as Safari and Chrome) because PhoneGap specific native libraries are not available.<\/p>\n

So I can now create my PhoneGap applications, deploy it on a web server and open the link in my PhoneGap shell application. If I modify the application, I just refresh the page in the shell application. So testing is faster.<\/p>\n


\n\"phonegap_shell_ios\"<\/a><\/p>\n

But the usefulness of this application is not just limited testing. It could be used as a client to PG mobile web applications, hosted on \u00a0server in enterprise. You could create a home page of applications and open that page in the PG shell application. You can now have mobile web applications that can access Camera, Contacts, Files etc. of user’s mobile, using PhoneGap APIs. And adding new application or modifying application is simple, because you just add\/update the application on your server and it is available immediately to users.<\/p>\n

 <\/p>\n

 <\/p>\n

Here are the things you need to be aware of if you want to develop such application –<\/p>\n

Separate cordova.js file for different platforms<\/h2>\n

Note : You need to be concerned about this only if you intend to test\/support multiple mobile platforms.<\/p>\n

When you create a PhoneGap application using the command line utility, it creates a project with cordova.*.js. The file name is same on Android and iOS (and possibly others too). But they are\u00a0actually\u00a0different JS files for each platform. The use-case I am talking about in this post requires you to host cordova.*.js on a server. You need to make sure that you host corodva.js on your server for all platforms you want to support.
\nSo how does your web application know which corodva.js to load? I can think of two easy ways<\/p>\n

    \n
  1. When you request a URL from the shell application, pass a URL parameter indicating which platform the application is going to run on. Then in your web (PG) application. load the platform specific cordova.js dynamically.<\/span><\/li>\n
  2. Detect browser agent (HTTP_USER_AGENT) from the HTTP header request on the server (you will need an application server). The value of this header field contains text that can give you a hint about the mobile OS from where web request is coming. Then, as in #1 above, load appropriate cordova.js dynamically.<\/li>\n<\/ol>\n

    Same PhoneGap version on client and server<\/h2>\n

    This might seem obvious, but I will state it anyway. You need to make sure that you include the version of cordova.js on the server (your web application), same as the one with which the shell application is created. For example, if the shell application is created with PhoneGap 2.5 then you need to include cordova.js of the same version.<\/p>\n

    PhoneGap applications do not work in frames<\/h2>\n

    Once the web application is loaded in the shell application, I wanted to provide options to load other application urls, reload the page and go back to previous page – the basic browser options. So I though I would create buttons for these options in the shell application and load web application URL in an iFrame in the same page.<\/p>\n

    However I realized that PhoneGap does not fire deviceready event when the page is loaded in iFrame. Even using framesets did not work.<\/p>\n

    I worked around this problem in Android shell by providing application specific menus. However iOS does not support application menus. So in iOS it becomes the responsibility of web application to provide these (navigation) options, if they are required.
    \nHowever if you type a wrong URL in the shell application, you will get ‘page not found’ error, then the only way to re-enter URL in the shell application in iOS is to kill the app and start again. In Android this is not an issue because the shell application provides application specific menu options to re-enter the URL.<\/p>\n

    -Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"

    I wanted to create an application which I could use to run my other PhoneGap applications for testing, a kind of wrapper or shell application. When you are developing a PG application, you are changing you code frequently and running the application again and again in the emulator could be time consuming (actually it is … <\/p>\n

    Continue reading “Creating PhoneGap aware Web Browser”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Creating PhoneGap aware Web Browser http:\/\/wp.me\/p2g9O8-bI","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[17,1],"tags":[66,13],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-bI","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/726"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=726"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/726\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=726"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}