First experience with PhoneGap

Warning: this is not a tutorial but just a post where I share my initial experience with Phonegap and Cordova.

I had an interesting task to deal with and no idea how to start it off. I had to display a web site offline on an Android phone without relying on unstable wireless networks. A research was the way. There is no way that you can just upload a website to the microSD and expect the files to work as files on a FTP. All files live for themselves and there is no connection between one another. Yes, it might sound stupid, but I tried this approach.

How about having the website run on a computer with LAMP (Linux Apache mySQL PHP) configuration and in the same room as the phone? You can access the site through the computer’s IP and be sure that the network is going to be as fast as the WiFI device and/or router. I liked this approach – it’s no the easiest for a client to setup, but definitely it works. Yet there should have been something easier than that…

Would be great if I could destroy the dependency lap-top – phone and just have everything on the phone. The solution was making a native app, through a framework like PhoneGap. PhoneGap in a sentance is: “a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.” Sounds perfect, until I had to make standard HTML 5 videos work into that.

Surpisingly I had no problem installing all necessary components to run PhoneGap on my Linux Mint lap-top. I might have used the PhoneGap CLI compared to the Desktop App, but still all comands were relative easy to use and remember.

phonegap create app-name
cd app-name
phonegap platform add android
phonegap build

and then you have your .apk file inside android/build/outputs/apk

You can easily drop the file to your Android device and install it from there. I was surprised that everything was that simple until I saw that my HTML 5 videos were dropping me “Content not allowed”. Searching around couldn’t find an easy solution. Yet there were tons of discussions on what to try to make HTML 5 videos work on Android apps wrapped with PhoneGap. It’s a disaster – we’ve put men on the Moon, but we cannot run HTML 5 videos on Android apps without much customization. There were solutions as adding onLoad functions on the body tag, manually triggering play() on the video, dynamically saving the video files to the SD storage and serving them from there… I ended up trying two plugins, both of them were last updated a year ago – no success.

Now, there are other ways to play around with PhoneGap and Cordova without making a build from the CLI. You can just run phonegap serve and get server with an IP that you can connect to the official PhoneGap Developer app. That app would download stuff from your server and display it on your phone. I had some videos working that way but doesn’t help much when I cannot build and distribute the apk file by myself.

Another thing to note is that you can have one app built on a free account at Build Phonegap site. You just upload your zip with HTML, CSS and JavaScript and the rest is done online. You will get a QR code and easily get the app to your device or place the QR on your site. Now, the surprising thing was that my HTML 5 videos worked perfectly. There might be missing volume controller, but you can always use your phone’s buttons. I just wonder what they were doing differently when building the app.

Yet, a new issue was present. Lets say you choose to play a video in full screen and than you want to exit it. You would press back button once and nothing would happen, you would press it second time and you would go out of the application instead into the previous view. Bummer! I didn’t had the time to figure out how this can be resolved – I had enough of app building and decided to go with my LAMP method. Please, share in the comments bellow if you find a working solution for HTML 5 in PhoneGap.

Useful links for new beginners:
Official Adobe PhoneGap get started page
Lynda.com – Up and running with PhoneGap Build
Lynda.com – Building Mobile Apps with the PhoneGap Command-Line Interface
Telerik – adding custom plugins to Cordova
Telerik – Forum tread: Embedded local video file not playing on Android
Install all necessary components for Cordova on your Linux machine

 

Leave a Reply

Your email address will not be published. Required fields are marked *