Transcript Developing downloadable mobile apps using HTML5 and PhoneGap
Developing downloadable mobile apps using HTML5 and PhoneGap “Apache Callback”
Ron Perry, CTO, Worklight Inc.
2 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
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 Desktop: WinPhone 7.5
4 HTML5 makes mobile web apps possible
Native apps can still do much more VoIP Access Camera Audio Processing App-Store Presence 5 Video Processing
6 Downloadable (Native) Apps File System (on Mobile Device) Native App (Java/Obj-C/C#) Mobile OS
7 Web Apps Web Server Mobile Browser Web App (HTML, CSS, JS) Mobile OS
8 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 platform specific native code Portability Advantages Reuse of existing skills Access to device APIs App-store presence
9 Hybrid Apps File System (on Mobile Device) Native Container HTML, CSS, JS Mobile OS
10 App Development Comparison Device Access Speed Development Cost App Store Approval Process Native Full Very Fast Expensive Available Mandatory Hybrid Web Full Partial Native Speed as Necessary Reasonable Available Fast Reasonable Not Available Low Overhead None
11 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
12 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
13 PhoneGap provides JS access to device APIs
14 PhoneGap run-time (native+JS) is part of the app
15 Example: raising a native alert from JS code
16 Example: getting device info
17 Example: accessing the camera
18 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!
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
20 For More Information
Resource
PhoneGap Site Apache Project Page Worklight Webinars
Location
http://www.phonegap.com
http://incubator.apache.org/projects/callback.html
http://www.worklight.com/resources/webinars-and-tools