API Development

Getting Started with Mobile Web

The release of our 2.0 SDK included with it the Mobile Web Release Candidate. The Mobile Web SDK is a port of our Titanium SDK to the HTML5 specification. For the initial release, we support methods and objects that are in the HTML5 specification but, in time, it will be extended support beyond just the HTML5 spec. In this post, we’re going to cover how to get started using the Mobile Web SDK.
The Mobile Web RC is constantly being worked on and new bugs and enhancements are being addressed every day. In order to get the most of out the Mobile Web RC we recommend downloading and utilizing the latest CI build when building your Mobile Web applications.
You can get the latest CI build at: https://builds.appcelerator.com.s3.amazonaws.com/index.html
For instructions on how to install CI builds, check out the wiki article here:https://docs.appcelerator.com/titanium/2.0/index.html#!/guide/Installing_Titanium_SDK_Continuous_Builds

Create A New Project

In order to create a Titanium mobile project to run on the Mobile Web platform, go through the same steps you would for any other platform (iPhone/iPad, Android). Please take note that you’ll need to remember to select the “Mobile Web” option for these projects.

For this example, we’re going to create an application using the “Tabbed Application Template” available via the “Create New Mobile Application” dialog. After providing the necessary information, choose “Next” rather than “Finish” in the dialog box above. In the “Project Template” dialog, choose the tabbed application template and then “Finish”.

Once the app is created you can see that the application structure is identical to an iOS or Android application with simply the addition of the “mobileweb” platform specific folder. Just as with Android and iOS, you can use this folder to store platform specific resources.
Check out this wiki article regarding Mobile Web Assets.

Viewing and Testing

Titanium Studio includes an integrated web server that you can use for developer-level testing (where you test your own work). You can use this server to test your Mobile Web project within a browser installed on your computer or to host pages accessible within the emulator or simulator. In order to view your application in a browser, choose “Run” > “Mobile Web Preview in Browser” from the App Explorer menu in Titanium Studio.

When you are ready to start testing your mobile web application, we suggest doing so first in your desktop browser. Safari and Chrome are the recommended browsers for testing. The reasoning behind testing in a desktop browser is to utilize the web inspector and browser debugging available in your desktop browser. Since you mobile web application is HTML and CSS, using the browser console to test and debug is no different from any other web application.

Deploying A Project

A Titanium Mobile Web app is designed to be run from a web server. You can successfully run it from a browser as a local file, but not everything will work correctly. You can package your app using the Deploy menu as shown, then specifying a local directory into which Studio will copy place your project’s files. You’d then upload those files to a web server for general access.
Please keep in mind when deploying to a web server, if your application uses Ti.Network.HttpClient to communicate with different sites, then either those sites must enable CORS (Cross-Origin Resource Sharing) or you must set up a proxy on your web server with CORS enabled.

Resources

CI Builds
CI Build Installation
App Icon and Splash Screen Mobile Web Assets
Cross-Origin Resource Sharing (CORS) – Wikipedia or W3C
Mobile Web Limitations