Skip to end of metadata
Go to start of metadata

Objective

In this section, you will examine the concepts, features, and components that define Mobile Web apps. We'll lay out our definitions of Mobile Web and "hybrid" apps and compare them to other terms you might have used. And, we'll also look at the benefits as well as some of the inherent limitations of HTML/web apps.

Contents

What is a Mobile Web app?

You have probably heard terms like "web app" or "mobile app" used widely and not very precisely. In our case, we use the terms in some specific ways:

  • Native app – runs directly on a mobile device and has access to the hardware features of that device. "Regular" Titanium apps are native because our Javascript API translates your code into native API calls for UI, device sensors, data storage, and so forth. Native apps typically excel at performance and platform-specific user experience, plus can be run without a live network connection.
  • Web app – we use this term to mean mobile-ready web pages accessed from a desktop or mobile browser, and typically formatted specifically to address the screen sizes and user interaction expectations of a mobile device. Web apps excel at platform reach, a "no-download" installation process, and instant application updates for all users. Web apps typically require a constant network connection.
  • Hybrid app – an application in which some or all of your UI and business logic is written in HTML, CSS, and JavaScript running within a "native wrapper" such as a Titanium WebView or Phonegap container. Hybrid apps have limited access to the device hardware, though such access varies by mobile operating system and development framework. Hybrid apps offer app store distribution and operation without a live network connection.

Keep in mind, that building a native app in Titanium gives you full access to native APIs for UI, device sensors, data storage, and other common mobile APIs. Plus, where it makes sense, you are also able to use platform-specific UI and features like intents on Android or local notifications on iOS. But sometimes a web or hybrid app makes the most sense, and for that, we offer our Mobile Web options.

Titanium is the only platform which enables you to create native, hybrid, or web applications from a single JavaScript codebase. Thanks to Mobile Web, you can build your Titanium application as an HTML app. Then, you can post it to a web server to create a web app. Or, you can wrap it in a WebView for installation onto a handset.

What Mobile Web can do...

The Appcelerator engineers have done a great job implementing Titanium functionality in a web environment. API support includes:

  • Common UI elements (buttons, views, tabs, etc) plus animations and 2D matrix operations. You can even modify the theme or customize the generated CSS to tailor your web UI to your design needs.
  • HTTP network access, though some cross-domain scripting restrictions will be enforced by the mobile browser. See the API docs for information about creating cross-domain policies that will work around some of those restrictions.
  • Local storage via the mobile browser's support for offline data storage.
  • Support for add-on modules in the form of AMD (asynchronous module definition) and CommonJS (JavaScript) modules.
  • Precache resources for faster loading. See tiapp.xml and timodule.xml Reference Guide for more information.

What Mobile Web cannot do...

There are various portions of the Titanium API that cannot be reproduced in the Mobile Web world. These include:

  • Access to platform-specific components, such as Android activities or iOS local notifications. These either do not exist in a web framework or are excluded by vendor restrictions. (Apple restricts use of some services, such as iAd, and we have no control over their choices.) As such, the platform-specific namespaces (e.g. Ti.UI.iPhone) don't exist for mobile web.
  • Universal access to hardware sensors, such as the camera. Support for such device integration is highly dependent on the mobile browser used to access your mobile web site. We strive to offer support whenever possible, though problems will likely always remain.
  • Full application operation without a constant network connection. While you can provide some measure of local caching, for the most part, your Mobile Web app will require a constant data connection to operate.
  • Native UI controls. While you can use HTML representations of components like pickers and buttons, you cannot access the mobile operating system's native UI controls. If you need that, you'll have to build a native app from your Titanium code.
  • Access to components, such as Contacts or Calendar, which depend on operating system support. Where the systems permit access, we'll implement such features. Where they don't, we won't.
  • Support Titanium+Plus modules for Android and iOS, such as the ones found on the Appcelerator Open Mobile Marketplace. These modules are written in the platform's native language and cannot run in a browser.

(See Mobile Web Limitations for more info on limitations and considerations.)

Supported Browsers

The following browsers have been tested to be compatible with the HTML/CSS/JavaScript created by the Mobile Web build process.

Note that the Mobile Web platform is designed to build applications for mobile browsers, not applications for desktop browsers. Desktop browsers are recommended only for previewing and debugging Mobile Web applications.

Recommended Browsers
  • iOS Safari 4.2, 5.0, 6.0
  • Android 2.2, 2.3, 3.0, 4.0
  • IE 10.0
  • IE Mobile 8.0, 8.1
  • Firefox 10.0, 11.0
  • Chrome 10.0
  • Safari 5.0
  • Firefox Mobile 7.0, 8.0, 10.0
Limited Functionality, Requires Workarounds
  • iOS Safari 3.X
  • Android 2.1
  • WebOS 3.0
  • Safari 4.0
  • Chrome 4.0
  • Firefox 4.0
Icon

Because your Mobile Web Titanium code runs within the JavaScript environment of a browser, you must not use variable names that exist in that environment. For example, window is a valid variable name for your app's window in Titanium compiled to native iOS or Android. However, using window as a variable name in Mobile Web would fail because there's a DOM object named window.

References

Summary

In this section, you learned about the concepts, features, and components that define Mobile Web apps. We covered our definitions of Mobile Web and "hybrid" apps and compared them to other terms you might have used. And, we looked at the benefits as well as some of the inherent limitations of HTML/web apps.

  • No labels