btw, Sweden rocks
it's so gorgeous here!
as a (Vancouver) hockey fan... thank you
PhoneGap: Android Development Trench Wars
Filip Maj Nitobi
@filmaj
work at Nitobi (Vancouver, Canada, eh)
JavaScript, AI, hockey, beer
WARNING
i swear during my presentations
if you're easily offended you should probably take a break
wtf is PhoneGap?
- build native apps...
- ...using web tech...
- ...on six platforms...
- ...and access native APIs through JavaScript
- Android, iOS, BlackBerry, Bada, Symbian, webOS
how many web devs here?
why the web?
we believe in openness and freedom
not everyone does
the web and Nitobi
- quick history lesson:
- Nitobi is a web shop (12+ years now, 15-20 people)
- 2008: iPhone explodes in North America
- market emerges
- ... but Nitobi wanted to reuse existing web skills
so we started hacking
- summer 2008: iPhoneDevCamp, came basic iOS support
Nitobi hard at work
hacking continued
- later that year: Android 1.5
- bit later again: BlackBerry 4.6 and 5.0
- then Symbian, webOS, fledgling Windows Mobile
WebKit will be the platform of the mobile web
WebKit on mobile
- Android
- iOS
- BlackBerry 6+ (probably the best mobile WebKit browser)
- others I'm probably forgetting
image actually not a bad idea, talk a bit about how each platform implements
PhoneGap is a hack
key: PhoneGap.exec method in JavaScript
PhoneGap.exec(class, method, win, fail, arguments)iOS
// We catch urls of the following form on
// native side:
gap://class + '/' + method + '/' + arguments
// We get this method on the WebView:
evaluateJavascriptFromStringByStringAndMakeThisMethodNameAsVerboseAsPossibl
Android
WebView!
WebView.loadUrl("javascript" +
":alert('android only!');");
WebView.addJavascriptInterface(
/* arbitrary Java object */);Samsung and Motorola made changes to their webview codebase in mystical ways
And So The Trench Wars Started
- new Android versions came out
- tons of Android devices hit the market
- device manufacturers started forking Android
this is a tale of perseverance
Part 1: loadUrl
- remember:
WebView.loadUrlused to trigger JavaScript from Android Java - for sensor APIs, this may fire a lot (think accelerometer)
- problem #1:
loadUrlhides the soft keyboard
fuck.
Part 2: addJavascriptInterface
interestingly parts 1 & 2 started becoming problems around the same time, and they are each a method in JS -> native communication
addJavascriptInterfacegoes the other way: JavaScript to Java- problem #2: in Android 2.3 emulators and some devices, calling would crash the app
ffffuuuuuuuuuuuu
it's ok guys, IBM's got this
- we're lucky IBM contributes to PhoneGap
- they rebuilt the whole thing, now we use a callback server
wtf is the callback server?
- instantiate a tiny HTTP server on the Android device
- within app, from JavaScript XHR to the server via localhost
- BOOM: JavaScript to Java
Part 3: Callback Server
- ... yeah it doesn't work everywhere
- but again IBM to the rescue
the hack of hacks
ready for this?
prompt()
prompt(this.stringify(args),
"gap:"+this.stringify([service,
action, callbackId, true]));- any hack to get JS <--> native talking working, we'll do it
PhoneGap Android Today
- now we use a combination of prompt() and callback server
- no problems...
- ...yet ;)
PhoneGap on Android
- How to take advantage of Android-specific stuff using PhoneGap, a cross-platform development framework?
PhoneGap Plugins
- you can call into any native code you wish
- just because it's cross platform doesn't mean you can't enhance it
PhoneGap Plugin: Java
package com.phonegap.plugintest
import com.phonegap.*
public class MyPlugin extends Plugin
// ...
@Override
public PluginResult execute(String action,
JSONArray args, String callbackId)PhoneGap Plugin: JavaScript, pt. 1
navigator.app.addService("com.phonegap.plugintest.MyPlugin",
"MyPlugin")
// ^^^ will dynamically instantiate your native plugin classPhoneGap Plugin: JavaScript, pt. 2
function myPlugin() {};
myPlugin.prototype = {
doStuff:function(win, fail, argument) {
PhoneGap.exec(win, fail, "MyPlugin",
"someAction", argument);
}
}Moar plugins: http://www.github.com/phonegap/phonegap-plugins
Android Hardware Key Events
document.addEventListener("backbutton",
function() { alert('back!'); }, false);"backbutton""menubutton""searchbutton"- no
"homebutton":)
Speaking of menu ...
- we are working on implementing the HTML5
<menu>spec in PhoneGap - cross-platform context menus via markup (ideally)
- would apply to platforms with context menus: e.g. Android & BlackBerry
when changing flag, behaviour is similar to iOS 4 tombstoned apps; JS timers and other such tasks are paused
App Lifecycle Events
document.addEventListener("pause",
function() { alert('paused!'); }, false);"resume"- by default, your app does run in the background
- you can change this by setting a flag in native code in your app
Some Good PhoneGap Android Plugins
- BarcodeScanner
- ContactViewer
- Text-to-speech
- System Notifications
- and my favourite...
WebIntent
- https://github.com/phonegap/phonegap-plugins/tree/master/Android/WebIntent
- a hook into the native Intent system within PhoneGap - super cool!
please help!
PhoneGap project info
- MIT licensed
- all code on http://github.com/phonegap
- wiki: http://wiki.phonegap.com
- docs: http://docs.phonegap.com
- irc: irc.freenode.net, #phonegap
- contributors: IBM, Palm, Sony
PhoneGap Build
PhoneGap Build breakdown
- upload HTML/CSS/JS assets, or hook up to a git repo
- your assets queued up for building in the cloud
- get back native packages for six platforms
- in beta, so its free right now
- in the future, open source projects can be built for free :D
- also there's an API for integration into build systems
- and you can "live debug"
PhoneGap Support
- if you need support, see http://www.phonegap.com/services
Tack, eh
@filmaj on the twitters
fil.maj@nitobi.com
github.com/filmaj
filmaj on irc.freenode.net #phonegap
