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
Canvas
Audio
Local Storage
Geolocation
Video
CSS3 borders, anim
Web Applications
Android 2.2, 2.3
•
•
•
•
•
•
•
SVG
Elements
CSS3 position:fixed
Drag & Drop
Files
WebGL
IndexedDB, WebSQL
WinPhone 7.5
Desktop:
HTML5 makes mobile web apps possible
4
Native apps can still do much more
VoIP
Video Processing
5
Access Camera
Audio Processing
App-Store Presence
Downloadable (Native) Apps
File System
(on Mobile
Device)
Native App
(Java/Obj-C/C#)
Mobile OS
6
Web Apps
Mobile Browser
Web App
(HTML, CSS, JS)
Web Server
Mobile OS
7
Hybrid to the rescue
Combine HTML/CSS/JS with native code
User interface in
HTML/CSS
Logic and interaction
in JS
Special functions
written in platformspecific native code
Advantages
Portability
8
Reuse of
existing skills
Access to
device APIs
App-store
presence
Hybrid Apps
Native Container
File System
(on Mobile
Device)
HTML, CSS, JS
Mobile OS
9
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
10
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
Lotte Card (Korean credit card company):
• Combines 150 HTML5 screens with a
native augmented reality screen
• Developed very quickly for iPhone and
Android
19
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
Resource
Location
PhoneGap Site
http://www.phonegap.com
Apache Project Page
http://incubator.apache.org/projects/callback.html
Worklight Webinars
http://www.worklight.com/resources/webinars-and-tools
Thank You!
20