AJAX for Mobile

Ajax For Mobile Table of Contents Introduction............................................................................................................................................ 2 Characterizing Mobile Ajax Support Today............................................................................................... 3 Mobile Ajax in Action............................................................................................................................... 4 The Mobile Opportunity .......................................................................................................................... 7 Voice ................................................................................................................................................... 7 Camera................................................................................................................................................ 7 Video................................................................................................................................................... 7 Messaging ........................................................................................................................................... 7 Location .............................................................................................................................................. 8 Local connectivity ................................................................................................................................ 8 Performance Considerations ................................................................................................................... 9 Challenges ............................................................................................................................................... 9 Possibilities for the future...................................................................................................................... 10 JavaScript APIs for device-resident features ....................................................................................... 10 Web Runtime outside the browser .................................................................................................... 10 Multimedia........................................................................................................................................ 10 Offline ............................................................................................................................................... 10 Device descriptions repository ........................................................................................................... 10 Bibliography .......................................................................................................................................... 11 1 Introduction Internet usage on mobile devices has dramatically increased since 2007. This proliferation is the result of a rapid increase in processor power, improvements in network connectivity and reductions in the costs of mobile computing. Many mobile devices now include the same or similar Web browsing software as desktop computers. As a consequence, mobile device users expect access to the World Wide Web anytime, anywhere and from any device. The Ajax design approach has revolutionized the Web with highly responsive, lightweight applications. Mobile Ajax leverages this approach to address the constraints, opportunities and key issues of application developers who target mobile devices. With Mobile Ajax, Web pages are built with the same industry-standard HTML and JavaScript technologies used for the desktop Web, without creating technology subsets or profiles. With the global proliferation of mobile devices and expansion of mobile networks, Mobile Ajax is the right technology for delivering the applications and data demanded by the millions of users who connect to the Web via mobile and embedded devices . Through additional APIs, Mobile Ajax provides access to device services that enrich the Web experience of mobile users. Users are best served by applications that make contextual use of sensory data (e.g., device location.) Device services connect applications to the sensor-rich environment of mobile devices. At the same time, mobile devices are resource constrained and applications need to make efficient use of device resources in order to provide a good user experience. These two aspects of mobile devices create a number of opportunities and challenges for mobile application developers. This white paper provides guidelines to alleviate the challenges while maximizing the opportunities available to developers. (Open Ajax Alliance, 2009) 2 Figure 1: AJAX Overview (W3 Schools, 2009) Characterizing Mobile Ajax Support Today Ajax techniques allow a desktop-like experience within modern Web browsers using open technologies such as HTML and JavaScript. However, it is important to note that Ajax is still an emerging technology for mobile phones and not yet ubiquitous on these devices. Unlike developers of desktop Web applications, whose users can be expected to have Ajax-capable Web browsers, mobile application developers work knowing that today only a subset of mobile devices can fully use Ajax-powered websites, but, given current trends, sometime soon a significantly larger percentage of mobile phones will support the same Ajax technologies used by desktop computers. It is also important to note that HTML and Ajax are moving beyond the browser. Ajax is powering "mobile widgets," specialized mini-applications that the user installs on a mobile device to communicate with background services such as news, sports, weather, entertainment and financial data feeds. Additionally, some manufacturers and network providers are using Ajax technologies to create device-resident applications such as home screens, and for various modular, reusable application components. The Ajax experience is characterized by the rapid response of applications to user actions and the smooth updates of information delivered to the end user. These updates are concise, making Ajax a more attractive way to develop applications for bandwidthconstrained devices and environments. One of the key benefits of Ajax is that it can help address battery, bandwidth, latency and smooth multimedia issues. Ajax 3 compensates for the relatively large latency (long RTT) on mobile connections by fetching data asynchronously. Once the application is loaded, refreshing the data in the application using Ajax is more bandwidth efficient than reloading the whole page or screen. Ajax brings these capabilities to the mobile device, minimizing the use of resources and allowing videos to play smoothly in one part of the screen while other areas of an application are updated. However, at this time, few Ajax toolkits have been tuned to account for the unique constraints of mobile devices, and most websites are not optimized for mobile devices. Even when a device ships with a full Web browser, various factors such as small screen size and lack of a mouse result in a suboptimal mobile experience. The Ajax toolkit community is working to improve mobile platform support. Meanwhile, popular sites such as Google and FaceBook have customized the HTML sent to mobile devices to better address the characteristics of these devices. Improved mobile browser support and more complete mobile implementations of major Ajax toolkits are required for existing websites to work well on the majority of mobile devices. The proliferation of unique devices with specific purposes makes standardization in the mobile market a greater challenge than in the desktop market. Key Ajax libraries have only recently focused on the delivery of Web applications to mobile devices. Most existing Ajax libraries presently work only on high-end devices. The developer community has yet to establish common best practices to address a wide range of mobile requirements, such as widget libraries designed for small screens and the absence of a mouse. Mobile Ajax is still an emerging phenomenon. (Open Ajax Alliance, 2009) Mobile Ajax in Action Mobile phones are increasingly shipping with the same Web browsers as desktop computers, allowing users to view and interact with existing Web content. However, users can have a better user experience or gain entirely new capabilities when 4 application developers make custom mobile-specific applications, such as the two examples described below. One example of a Mobile Ajax application that uses simple Ajax techniques to fetch information is a train timetable Widget developed by Vodafone and demonstrated at the Mobile World Congress of 2008. The application involves two widgets, one for the mobile phone and one for the desktop. The desktop widget enables a user to select two train stations from which the mobile widget will retrieve information on the next available train between those two locations. The mobile widget design and layout (xHTML and CSS), additional graphical assets (PNGs) and logic (JavaScript) have all been prefetched to the device, where they reside locally. When the mobile widget is called, it uses the XMLHttpRequest method to check whether the preferred stations are listed and then pull down the changes to the user when the main page and its DOM are loaded. As the user selects the stations, they are graphically highlighted through DOM modifications to provide a responsive feel, and then the XMLHttpRequest method is used again to retrieve the information on available trains for presentation to the user. By leveraging Ajax, the two widgets are able to update the timetable, highlight stations as they are selected, and present the subsequent train schedule information without having to reload the whole widget, providing a responsive user experience akin to that of a "native" application. Furthermore, by prefetching the graphical assets and widget logic, the data to be downloaded is minimized to reduce battery drain. In summary, this application is a nice example of Ajax circumventing the latency problems of mobile applications, while reducing data load and providing a quality user experience. A second example of a live Mobile Ajax application is the "Bundesliga player" (available on Vodafone in Germany), that takes advantage of the SVG support found in some mobile browsers today. This application brings soccer information to mobile phones, including phones that do not support 3G. The application targets fans who want current game times, scores and statistics. Due to integrated video support within the Web 5 runtime, the user can also view video highlights and replays from games. This application is a single page that contains most of the references to the graphics and logic to be used. At the start of the application, the main page and its DOM are loaded. During the remaining execution of the application, modifications are made to the DOM in response to user actions and preprogrammed changes. This means that only one full page will be loaded during the entire execution of the application. Data used to update the application is fetched from the server using XMLHttpRequest and by updating URLs to images and multimedia objects. From a user perspective, this means that the screen will never be blank due to the loading of an entire page. Changing one graphic object to another is either instant, if the object is already loaded, or takes place as soon as the new object has been fetched over the network. The resulting service cannot be distinguished from a native application in terms of user experience. The responsiveness for most functions is as good as a native application, and the graphics are smoothly updated. The application is a nice example of how Ajax can overcome the latency problem of most mobile applications and help to bring live services to the mobile user experience. (Open Ajax Alliance, 2009) Figure 2: Mobile Ajax Library 6 The Mobile Opportunity Mobile devices provide new and interesting ways to access information. The challenges faced by the developers of Mobile Ajax solutions are primarily characterized as limitations of the device: screen size, support for specific data formats, data input and retrieval and processor capability. Domain-specific features including GPS location, voice call initiation and push messaging are also commonly cited. Mobile devices present many unique opportunities for developers to create novel applications that integrate the following features: Voice: Voice dialing, voice mail, voice activation, voice controlled automobiles and good old telephony are the leading functions that, when integrated, increase the utility of an application or service delivered to a mobile device. Camera: In 2008, the number of cameras integrated into mobile phones shipped will surpass the combined number of film and standalone digital cameras that ship. Traditional photography vendors will enter the mobile market. Mobility means that the end user has more opportunities to take and send photographs. As a result, social networking that incorporates images is a growing phenomenon and supported by the development of custom applications. Many other mobile applications using a camera are possible: comparison shopping, barcode reading (2D barcodes included), emergency communication, medical services, and gaming and other forms of entertainment. Video: Most embedded cameras are also capable of taking low-resolution video, making video recording, video chat, and eventually, video telephony commonplace. These applications will become table-stake requirements for carriers and handset vendors who wish to gain share by winning early adopters through the delivery of unique applications and services. Messaging: Mobile devices are generally used in an asynchronous fashion. Presence is increasingly a significant part of this technology, providing the means to 7 control messages. Maintaining the end-user state (busy, available, uninterruptible, call-me, etc.) is a key feature of presence. Mobile applications should interoperate seamlessly in asynchronous environments, permitting interruptions, making use of available presence information, and where possible, taking advantage of the messaging infrastructure to deliver the billions of SMS messages that will be received in 2008. Location: In some cases, it has become possible to identify the geographic location of a desktop Web user with an accuracy approaching the typical city map. User data on the device may add context to Web services and applications: a weather widget, for example, may fetch forecasts based on the user's actual location. However, inaccuracies as big as continents also occur. In contrast, mobile devices are capable of identifying the user's location, including the altitude of that person, to within a few feet. This level of precision is made possible by signal triangulation or Global Positioning Satellites (GPS). When the developer has access (and permission), this information can be used to customize the behavior of an application to predict the end user's specific needs at that specific point in time and location: the weather widget can fetch a forecast based on the user's actual location. When integrated with a mapping technology, use of these applications can be rapidly adopted by the mainstream user. Local connectivity: Many phones are now equipped with Bluetooth, which enables local wireless connection to a host of devices. One of the most common uses is the peer-to-peer transfer ("beaming") of data such as contact details or pictures to other phones, but in general it can be used whenever one device needs to connect to another (such as for printing, playback of music or backup). In some cases, this allows a phone to connect to accessories (e.g., a GPS receiver) as an alternative to having that hardware built into the phone itself. Using Bluetooth, a phone can also be a slave device (e.g., for storage or Internet access), which is enabling the emergence of a category of handheld Web tablets with large screens and desktop-class browsers but no built-in cellular radio. 8 Performance Considerations A properly designed Mobile Ajax application can be highly responsive with minimal impact on battery usage. The following table summarizes some of the key performance considerations with Mobile Ajax applications when compared to alternative approaches, such as HTML pages that do not use Ajax techniques, proprietary single-vendor Web formats, and Java or native code applications. The table below emphasizes that network operations generally affect the battery more than local processing of HTML and JavaScript. Figure 3: Mobile Ajax vs. Alternative Technologies Challenges Think of a smart phone that does not have a Wi-Fi or 3G capability. All you have is a simple Bluetooth and infrared. Those who have Wi-Fi are a little bit expensive today and are very vulnerable to attacks. Ajax based mobile phones still has a long way to go in mobile phone technology. Although you have the ability to build applications that does not require too much of a bandwidth, the practical hardware side of Ajax is not just there. If you are a consumer like me, do not get too excited regarding your prospects in the next mobile phone technology. There is still a long way to go for the hardware to cope up with the things that are developing. For now, we just have to live with an Ajax-free world in our mobile phones. (Mobile Ajax, 2009) 9 Possibilities for the future Industry leaders are hard at work making the standards-based Web Runtime more flexible and powerful to deliver a richer user experience for mobile users. Here are some future features for the Web Runtime that the industry is working towards: JavaScript APIs for device-resident features, such as location, contact lists, local e-mail database, SMS messaging, MMS messaging, phone dialer, camera, connection status (e.g., signal strength), data connection speed and battery status, all within the context of a security framework. Web Runtime outside the browser, where the Web Runtime is used as the engine for installed widgets, and locally installed HTML/Ajax applications are used as a replacement for C++ or Java applications. Multimedia, such as video, audio and animated graphics. Many mobile devices include support for industry-standard audio and video codecs. The next step is enabling these features within the Web Runtime via support for HTML5 and/or SVG. Offline, where Web content can run in disconnected mode, using Google Gears or similar offline technology. Device descriptions repository , where the industry in partnership with the W3C Mobile Web Initiative (MWI) produces databases of Ajax-capable mobile devices which server adaptation tools can use to deliver appropriate content to different devices. 10 Bibliography Mobile Ajax: Why We Should Wait More (2009), [Online], Available: HYPERLINK "http://www.ajaxwith.com/Mobile-Ajax-Why-We-Should-Wait-More.html" http://www.ajaxwith.com/Mobile-Ajax-Why-We-Should-Wait-More.html [26 August 2009]. Open Ajax Alliance (2009) Introduction to Mobile Ajax for Developers, [Online], Available: HYPERLINK "http://www.openajax.org/whitepapers/Introduction%20to%20Mobile%20Ajax%20for%20Develo pers.php" http://www.openajax.org/whitepapers/Introduction%20to%20Mobile%20Ajax%20for%20Develop ers.php [25 August 2009]. W3 Schools (2009) AJAX Tutorial, [Online], Available: HYPERLINK "http://www.w3schools.com/Ajax/Default.Asp" http://www.w3schools.com/Ajax/Default.Asp [25 August 2009]. 11