Developing applications for Android and other mobile devices using web technologies is now well within reach. When the capabilities of HTML5 are combined with CSS3 and JavaScript, web application developers have an opportunity to develop compelling mobile applications using familiar tools. Not only is it possible to build mobile web apps that feel as good as native apps, but to also write an application once and have it run a variety of different devices. While the HTML5 specification is still evolving, there is a lot that can be used right now to build mobile web apps. Mobile web apps are now starting to provide many of the features that were once only available to native-language-based apps in Java, Objective-C, etc. Pro Android Web Apps teaches developers already familiar with web application development, how to code and structure a web app for use on the Android mobile platform. Understand both the why and how of mobile web app development, focusing on the Android platform. Learn how to structure mobile web apps through a number of practical, real-world application examples. Discover what cloud platforms such as Google AppEngine have to offer Android web apps, for both hosting web apps and providing device to cloud data synchronization solutions. Get a real picture of the status of HTML5 on Android and other mobile devices, including some things to watch out for when building your own applications. Understand the capabilities of the web application stack, and how to complement those with native bridging frameworks such as PhoneGap to access native features of the device. Gain an understanding of the different UI frameworks that are available for building mobile web apps. Learn how to include mapping and leverage location-based services in mobile web apps to create engaging mobile experiences. Enable social integration with your Android web app and gain access to millions of potential users. After reading this book, you will not only have a greater understanding of the world of web apps on Android, but also how to leverage additional tools and frameworks to increase the reach of your mobile web apps. Additionally, through the practical samples in the book you will have been given solid exposure of where both the opportunities and challenges lie when building mobile apps the web way. What you’ll learn What Android web apps can do, and when to use web development rather than native development to create an application. How to use existing JavaScript and CSS frameworks to create rich mobile user interfaces. When to use HTML5 and when to use a native bridging framework to access native Android functionality. Connext with cloud services and APIs to build engaging location based services and games. Enable social integration with your Android web app and gain access to millions of potential users. Who this book is for This bookis targeted at web developers looking to transfer their skills over to mobile application development.Readers will understand that Android is continuing to gain momentum in the marketplace and will want to build an application specifically for that platform.They will have a strong desire to use web technologies rather than the native tools to build applications, either due to personal taste or to gain cross-platform mobile portability for the majority of their application code. Table of Contents Getting Started Building a Mobile HTML Entry Form HTML5 Storage APIs Constructing a Multipage App Synchronizing with the Cloud Competing with Native Apps Exploring Interactivity Location Based Services and Mobile Mapping Native Bridging with PhoneGap Integrating with Social APIs Mobile UI Frameworks Compared Polishing andPackaging an App for Release The Future of Mobile Computing Appendix: Debugging Android Web Apps Cover 1 Contents at a Glance 3 Contents 375 About the Authors 380 About the Technical Reviewer 381 Acknowledgments 382 Introduction 4 Getting Started 6 Understanding Android Platform Capabilities 6 Device Connectivity 7 Touch 8 Geolocation 8 Hardware Sensors 9 Local Databases and Storage 10 Camera Support 10 Messaging and Push Notifications 10 WebKit Web Browser 11 Process Management 11 Android OS Feature Summary 12 Preparing the Development Environment 13 Text Editors and Working Directories 13 Web Server 14 Emulator 16 Hello World 21 Summary 24 Building a Mobile HTML Entry Form 25 HTML for the Mobile Web 25 Mobile-Ready Web Pages 25 Adding Form Elements 30 Adding Some Style 31 Form Styles with a Splash of CSS3 34 Improving the Page Title Appearance 37 Coding for Different Screen Sizes 38 Handling Device Orientation Changes 39 Adding Form Validation 43 Providing Feedback with Limited Screen Space 44 Summary 50 HTML5 Storage APIs 51 The Web Storage API 52 Saving Objects to Web Storage Using JSON 53 Local vs. Session Storage 58 The Web SQL Database 58 Saving To-Do List Items with a Client-Side Database 60 Database Versioning and Upgrades 66 Summary 67 Constructing a Multipage App 68 Single HTML File, Multiple App Pages 68 Creating a View Manager 71 Implementing View Actions 73 Building the Application’s Main Screen 76 Tweaking ViewManager Functionality 80 Home Screen Storage Requirements 81 Wiring Up the Home Screen 85 Building the All Tasks Screen 88 Implementing the View Stack 94 Summary 97 Synchronizing with the Cloud 98 Exploring Online Storage Options 98 Online Synchronization Store Requirements 99 Avoiding a Three-Tier Architecture 99 User Authentication 99 A JavaScript Synchronization Library 100 Possible Synchronization Solutions 100 Getting Started with Google App Engine 101 Deploying jsonengine Locally 102 Choosing a Suitable Synchronization Mode 103 Sending Your Offline Data to jsonengine 104 Updating the User Interface for Online Synchronization 106 Making a Desktop Interface 109 Querying a jsonengine Instance 110 Deploying Your Application on the Cloud 112 Summary 113 Competing with Native Apps 114 Adding Lightweight Animations and Native-Like Layouts 114 Adding a Simple Loading Spinner 115 Adding Scrollable Content 118 Sprucing Up the Action Bar 119 Making Your Application Location-Aware 121 The W3C Geolocation API Specification 121 Running Your Application Offline 125 The Offline Cache Manifest File 125 Exploring Hidden Offline-Caching Features 127 Detecting Your Connection Status 129 Summary 130 Exploring Interactivity 131 Introduction to the HTML5 Canvas 131 Drawing Interactively to the Canvas 134 Interactivity: The Way of the Mouse 134 Interactivity: The Way of Touch 136 Implementing Canvas Animation 139 Creating an Animation Loop 139 Drawing a Frame of Animation 140 Drawing Images: Accounting for Device DPI 144 Advanced Animation Techniques 151 Creating Realistic Movement in Animations 151 Canvas Transformations and Animation 155 Transformations and Our Car Animation 158 Summary 162 Location-Based Services and Mobile Mapping 163 Location-Based Services 163 Geosocial Networking 165 Mobile Mapping 166 Displaying a Map with Google Maps 167 Tile5: An Alternative HTML5 Mapping API 169 Adding Markers to a Google Map 171 Showing Marker Detail 173 A Mobile-Optimized Mapping UI 175 A Mapping UI Mockup 175 Coding a Boilerplate Mobile Mapping UI 177 Implementing UI Navigation in the Boilerplate 182 Selecting Markers with the Navigation Bar 186 Summary 194 Native Bridging with PhoneGap 195 Introducing Bridging Frameworks 195 When to Use PhoneGap 196 Downloading PhoneGap 196 A Sample PhoneGap Application 197 Building the Sample Application 199 Investigating the Sample Application 206 A Simple PhoneGap Mapping App 211 Tweaking the Sample PhoneGap Project 211 Transferring Existing Code into a PhoneGap App 216 Summary 221 Integrating with Social APIs 222 Connecting to Web APIs 222 What Is JSONP? 223 Dealing with APIs That Lack JSONP Support 229 Introducing the Geominer API 231 Locating Resources in Moundz 233 Finding Nearby Resources with the Geominer API 235 Using Geolocation to Track Your Position 239 Implementing a User Login 242 Constructing the Welcome and Login Screen 243 Twitter Anywhere and the Login Process 246 Alternative Twitter Authentication via Geominer 251 Summary 254 Mobile UI Frameworks Compared 256 Mobile UI Frameworks Overview 256 Similarities and Differences Between Frameworks 257 Setting Up for the Framework Comparison 258 Jo 262 Getting Started with Jo 263 Moundz, Meet Jo 265 jQTouch 270 Getting Started with jQTouch 271 Applying Some jQTouch-Ups to Moundz 274 jQuery Mobile 279 Getting Started with jQuery Mobile 280 Moundz and jQuery Mobile 282 Sencha Touch 288 Getting Started with Sencha Touch 289 Moundz and Sencha Touch 291 Summary 299 Polishing and Packaging an App for Release 300 Continuing on with jQuery Mobile 300 Reinstating the Login Screen 300 Improving Navigation Layout 306 Gathering Resources 308 Building the Resource Details Screen 308 Using Geominer for Resource Tracking 315 Packaging Moundz As a Native Application 317 Bundling for PhoneGap 317 Tweaking Application Permissions 322 PhoneGap, Authentication, and Intents 324 Our Previous Web Authentication Flow 324 An Overview of Android Intents 325 Using PhoneGap Plug-Ins to Handle Intents 327 Packaging Our Application for Release 332 Summary 337 The Future of Mobile Computing 338 The Era of Mobile Computing 338 A Worldwide Phenomenon 339 Death of the Desktop? 340 Embracing Progressive Enhancement 340 Mobile Technology Predictions 343 Improvements in Tools and Libraries 343 Changes in Device Architecture 345 Coding for Future Architectures 347 The Internet of Things 347 Hardware Sensor Networks 348 The Human Sensor 350 Summary 351 Debugging Android Web Apps 352 JSLint: Prevention Is Better Than Cure 352 Debugging with the Google Chrome Developer Tools 353 Catching Messages and Errors in the Console 353 Script Debugging 355 Inspecting the DOM with the Elements Tab 357 Debugging with the Android Debug Bridge 358 Index 360 Special Characters 360 A 360 C 361 B 361 D 362 F 363 G 363 E 363 H 364 I 364 K 365 J 365 L 365 M 366 N 367 O 367 P 368 S 369 Q 369 R 369 T 370 V 371 U 371 W 371 X 372 Y 372 Z 372 Apress From the publisher. Developing applications for Android and other mobile devices using web technologies is now well within reach. When the capabilities of HTML5 are combined with CSS3 and JavaScript, web application developers have an opportunity to develop compelling mobile applications using familiar tools. Not only is it possible to build mobile web apps that feel as good as native apps, but to also write an application once and have it run a variety of different devices. While the HTML5 specification is still evolving, there is a lot that can be used right now to build mobile web apps. Mobile web apps are now starting to provide many of the features that were once only available to native-language-based apps in Java, Objective-C, etc. Pro Android Web Apps teaches developers already familiar with web application development, how to code and structure a web app for use on the Android mobile platform. Understand both the why and how of mobile web app development, focusing on the Android platform. Learn how to structure mobile web apps through a number of practical, real-world application examples. Discover what cloud platforms such as Google AppEngine have to offer Android web apps, for both hosting web apps and providing device to cloud data synchronization solutions. Get a real picture of the status of HTML5 on Android and other mobile devices, including some things to watch out for when building your own applications. Understand the capabilities of the web application stack, and how to complement those with native bridging frameworks such as PhoneGap to access native features of the device. Gain an understanding of the different UI frameworks that are available for building mobile web apps. Learn how to include mapping and leverage location-based services in mobile web apps to create engaging mobile experiences. Enable social integration with your Android web app and gain access to millions of potential users. After reading this book, you will not only have a greater understanding of the world of web apps on Android, but also how to leverage additional tools and frameworks to increase the reach of your mobile web apps. Additionally, through the practical samples in the book you will have been given solid exposure of where both the opportunities and challenges lie when building mobile apps the web way. What you'll learn: what Android web apps can do, and when to use web development rather than native development to create an application; how to use existing JavaScript and CSS frameworks to create rich mobile user interfaces; when to use HTML5 and when to use a native bridging framework to access native Android functionality; connect with cloud services and APIs to build engaging location based services and games; enable social integration with your Android web app and gain access to millions of potential users. This book is targeted at web developers looking to transfer their skills over to mobile application development. Readers will understand that Android is continuing to gain momentum in the marketplace and will want to build an application specifically for that platform. They will have a strong desire to use web technologies rather than the native tools to build applications, either due to personal taste or to gain cross-platform mobile portability for the majority of their application code