Developing HTML5 Apps

The HTML5 app environment lets you create and deploy apps built from web technologies (HTML5, CSS3, and JavaScript) with Cordova plugins. These plugins can access the underlying device hardware and native services, just like native C/C++ apps.

Overview

An HTML5 app created with the Apache Cordova framework can be targeted to run on different devices, or ported from a different OS, such as iOS, BlackBerry 10, or Android.

You can take advantage of the available mobile web frameworks, such as Sencha Touch and jQuery Mobile. In addition to the Apache Cordova plugins and the plugins provided in the HTML5 SDK, these mobile frameworks provide APIs are useful for creating HTML5 apps. There is one caveat about using mobile frameworks: you may find that some frameworks or features don't function on the QNX SDK for Apps and Media, because the target board doesn't support the feature. For example, the Vibrate API used on many phones won't work on your target unless the hardware supports vibration.

The process for creating an HTML5 app is similar to mobile development. You can use an iterative development approach to add functionality, testing as you go along. The following diagram shows the main development workflow:
Figure 1. The HTML5 app development workflow
For a walkthrough of the entire process, consider looking at "Example: Hello World!."

Creating a Cordova project

To start a Cordova project, use the create command to create a skeleton HTML5 project. For more information about the create command and the folder structure that it creates, see Creating an HTML5 project.

Modifying and adding files

After you create a Cordova project, you modify and add files to your project. You might add images, HTML files, plugins, and JavaScript.

Here are a few guidelines to follow during the development of your app:
  • To ensure that apps function correctly, verify that the Cordova project has the proper permissions, and disable pinch and zoom. For more information about these tasks, see "Creating an HTML5 project."
  • You can use Cordova plugins and plugins provided in the HTML5 SDK to incorporate functionality as required for your app. To manage any plugins that you want to use in your project, use Plugman. After you add a plugin to your project, it's bundled into the .bar file during the build process. For more information about managing plugins, see "Managing plugins."
  • If you need to access native functionality, you may find it useful to create your own custom plugin. For more information about creating custom plugins, see Creating Custom Cordova Plugins. If you require access to PPS objects or want to limit permissions, look at the example code in the "Example: Adding a permission to access a PPS object."
  • Modify the config.xml configuration file to tell the framework which HTML file to launch your app with, configure your app's behavior, and list plugins you have added to the Cordova project. For more information about modifying the config.xml file, see "Working with the configuration file."
  • As you develop and test your app, ensure that your app performs and functions well. If you find that you need to improve performance, follow the guidelines at Improving HTML5 app performance.

Testing and debugging locally

The HTML5 standard ensures compatibility between browsers, making the environment compatible with mobile, desktop, and web environments. Therefore, you can test an HTML5 app locally using a web browser. If you are using a WebKit-based browser, you can debug your app using Web Inspector. For more information about using Web Inspector and debugging apps, see Debugging Web Apps.

The testing you do is useful to test interactions and transitions in your app. You can test functionality that you incorporate from JavaScript libraries (provided your browser supports the plugin). To run an app, select the starting HTML file for your app and run it in a web browser on your host computer. It's important to recognize that some functionality may not work because:

For example, any functionality that requires communication with PPS objects or calls to Cordova JavaScript Plugins won't work in your local browser because these require a target that runs Apps and Media. For this reason, your final testing should be on a target or VMware image running Apps and Media.

Packaging the app

To fully test functionality (especially native functionality that your HTML5 app uses), use the build command to package your HTML5 app into an archive called a .bar file. For more information about packaging a Cordova app, see Packaging an HTML5 app.

Installing and testing app on target system

After you build a .bar file, transfer the .bar file to your target to install, launch, and test your app. You should ensure that you do final testing on a target board or VMware running Apps and Media—especially if you need to test native functionality or functionality specific to Apps and Media.

For more information about installing, launching, stopping, and uninstalling apps, see the Application and Window Management guide.

If you need to debug your application, you can use a WebKit-based browser and connect to your target. For more information about debugging an app on a target board, see Debugging Web Apps.