developing downloadable mobile apps using html5 and phonegap

Developing downloadable
mobile apps using HTML5 and
PhoneGap “Apache Callback”
Ron Perry, CTO, Worklight Inc.
Agenda
Downloadable (native) apps vs. Web apps
• HTML5 web apps vs. Downloadable apps
Using HTML5 in downloadable apps: the hybrid model
• How hybrid apps work
• Advantages and disadvantages
Writing an app with PhoneGap
• The concept
• Accessing device APIs
Our experience with PhoneGap
2
Critical HTML5 features are supported on mobile
3
iOS5 Android 2.2, 2.3
WinPhone 7.5
• Canvas
• Audio
• Local Storage
• Geolocation
• Video
• CSS3 borders, anim
• Web Applications
• SVG
• Elements
• CSS3 position:fixed
• Drag & Drop
• Files

• WebGL
• IndexedDB, WebSQL
Desktop:
HTML5 makes mobile web apps possible
4
Native apps can still do much more
5
Video Processing
VoIP
Audio Processing
Access Camera
App-Store Presence
Downloadable (Native) Apps
6

File System
(on Mobile
Device)
Native App
(Java/Obj-C/C#)
Mobile OS
Mobile Browser
Web Apps
7
Web App
(HTML, CSS, JS)
Mobile OS
Web Server
Hybrid to the rescue
8

Advantages
Portability
Reuse of
existing skills
Access to
device APIs
App-store
presence
Combine HTML/CSS/JS with native code
User interface in
HTML/CSS
Logic and interaction
in JS
Special functions
written in platform-
specific native code
Hybrid Apps
9

File System
(on Mobile
Device)
Mobile OS
Native Container
HTML, CSS, JS
Full
Native
Speed as
Necessary
Reasonable Available

Low
Overhead
Hybrid
App Development Comparison
10
Native
Device
Access
Speed
App Store
Approval
Process
Full Very Fast Available Mandatory
Development
Cost
Expensive
Partial Fast
Not
Available
Reasonable None
Web
Architecture of a hybrid app
Native container:
• Creates instance of UIWebView / android.webkit.WebView / etc.
• Navigates to main html file
• Implements listener/handler for requests coming from JS code
• Activates JS code when necessary

HTML5/CSS3/JS code:
• Implements UI and app logic

• Activates native handlers through OS-specific mechanism (custom URL
scheme)
• Receives responses through JS handlers

HTML resources can be packaged into downloadable app for
performance boost
11
PhoneGap – Open Source Framework
The de-facto standard for hybrid app development
Now in transition into becoming “Apache Callback”
Provides:
• A template implementation for the native container
• Implementation of the JS<->Native bridge for 6 mobile OSs
• OS-independent JS APIs for activating device functions

12
PhoneGap provides JS access to device APIs
13
PhoneGap run-time (native+JS) is part of the app

14
Example: raising a native alert from JS code
15
Example: getting device info

16
Example: accessing the camera
17
Worklight Platform: PhoneGap-based client-side
The Worklight Platform provides an enterprise-grade

infrastructure for mobile apps

Includes features such as security, authentication,
data-integration, push notifications, diagnostics, direct update
and more

We chose PhoneGap as the basis for our client-side technology,
(while exposing the PhoneGap APIs) and are very happy with the
result!
18
A couple of Worklight-based apps
19
Lotte Card (Korean credit card company):
• Combines 150 HTML5 screens with a
native augmented reality screen
• Developed very quickly for iPhone and
Android
RealNews (for iPad):
• Developed by RealCommerce, Worklight’s
distributors in Israel
• Lists “hot” Israeli news articles by # of likes
• Freely available on the app store
For More Information
20
Resource
Location
PhoneGap Site

Apache Project Page

Worklight Webinars

Thank You!