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 [...]... / 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. .. 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!... 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... 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 JSNative 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... 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 . 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. 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. 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