You can download Intel® App Preview onto your Android*, Apple iOS* and Microsoft Windows* mobile devices directly from the respective app stores. Click or tap the icons below to locate Intel App Preview in each app store.

Introduction

As you develop hybrid mobile HTML5 apps (e.g., Cordova* or PhoneGap* apps assembled from HTML, CSS and JavaScript) for multiple platforms, such as iOS, Windows 8* and Android, it will become evident that each platform renders your HTML5 code differently. These differences show up in the way your CSS renders, whether or not WebRTC or WebGL is supported, how touch events behave, etc. Intel App Preview was created to give you the means to quickly preview your mobile HTML5 app on real devices in the native WebView that your hybrid HTML5 app will run in. This native WebView is the HTML5 "runtime engine" in which your HTML5 code is interpreted; you can think of it as an embedded browser on your mobile device. See this blog post for an explanation of the difference between a native WebView and a mobile browser.

The emulator that is included with the Intel XDK cannot provide the level of device simulation necessary to confirm that your HTML5 code will run properly on real devices. The HTML5 runtime engine (interpreter) that is used in the emulator is essentially a Chromium desktop browser; it has far more CPU processing power, more RAM and more advanced HTML5 features than the WebView found in real devices. It is useful for quick application logic debugging and basic layout confirmation, but it will not help you understand how your application will run on a real device. Therefore, App Preview is a valuable resource for helping you understand how your app will run on a real device as a "packaged" hybrid mobile HTML5 app.

Purpose

Intel App Preview provides Intel XDK developers with the means to directly test HTML5 apps on a mobile device encapsulated within the native container, or WebView. If you are new to building HTML5 Cordova apps, take some time to review and build the HTML5 samples developed by Intel and stored publicly in our github/gomobile repos. App Preview can be used in conjunction with the Intel XDK or independently for quick on-device testing and previewing.

Features

On your device, the bottom of the App Preview screen includes a toolbar. Each icon is explained below.

Overview

The first item in the bottom navigation bar is the Overview tab. To view your apps created with the Intel XDK, you will need to log into App Preview using your Intel XDK account. Use the same username and password in the Intel XDK and App Preview.

Server Apps

HTML5 projects developed or imported into the Intel XDK are available on the App Preview Server Apps tab after you sync or push those projects to the Intel XDK cloud servers (see the Intel XDK Test tab's "Push Files" button). Those projects that have been pushed to the cloud are listed on the App Preview Server Apps page. Projects launched from within the App Preview Server Apps tab are downloaded from the Intel XDK test servers and run within the Intel XDK Cordova API enabled container, or WebView. This Cordova API enabled container allows your HTML5 project to use hardware specific API calls. Cordova API functions are limited to the "built-in" Cordova and Intel XDK plugins that are shown on the Project tab's plugin list.

Local Apps

HTML5 projects can also be loaded directly from the Intel XDK into App Preview on your mobile device if both are connected to the same network and operating on the same subnet. Within the Test tab, you must select WiFi to have the Intel XDK send projects over the local WiFi connection directly from the local project directory on your local disk.

Live Layout

Part of the preview capabilities provided by the Intel XDK includes Live Layout Editing, where you can preview your app running on your device connected to your development system over WiFi (see the local apps section, above, for details).To initiate this feature, use the Intel XDK Develop tab as described in http://software.intel.com/en-us/html5/articles/using-live-development and tap the Live Layout tab in App Preview.

Demo Apps

If you are new to HTML5, or interested in demoing HTML5 hybrid apps, the Demo Apps tab provides a range of projects showcasing different HTML5 features, JavaScript* UI libraries and device hardware access features. All of the demo apps listed in App Preview are located at https://github.com/gomobile.

Using the QR Code Reader

The QR code reader within App Preview is essential for launching Intel XDK “cloud stored” HTML5 projects (projects synced using the Test tab) developed using the Intel XDK. App Preview allows users to scan QR codes for any project pushed to the Intel XDK testing servers. This lets you quickly beta test HTML5 or hybrid HTML5 projects on any App Preview installed device by sharing the QR code with other App Preview users. Tap the camera icon located in the upper-right corner of App Preview and scan the QR code to download and run the associated HTML5 app.

Conclusion

Intel App Preview provides multiple useful options for testing hybrid HTML5 apps on mobile devices. Projects pushed to the Intel XDK cloud test servers or those hosted locally on your workstation are available for testing and previewing directly on device with App Preview.

Debugging Your App Using the Debug and Profile Tabs and Run My App

When you use the Intel XDK Debug and Profile tabs, or the "Run My App" feature on the Develop tab, your app is loaded and run over USB on a Crosswalk WebView (on an Android device). This process is facilitated by App Preview which may ask your permission to download and install App Preview Crosswalk* onto your mobile device. When using the Debug and Profile tabs, and the "Run My App" feature on the Develop tab, the Intel XDK uses App Preview Crosswalk to run your app. This means your app is running in a Crosswalk WebView, not in the built-in Android WebView.

If you build your app by choosing the Crosswalk for Android platform in the Build tab, you will see similar behavior and results to those you seen when using the Intel XDK Debug tab. However, if you choose to build your app using the Android platform in the Build tab, you will see differences in behavior between the Debug tab (Crosswalk WebView) and your app running on a device using an Android WebView.

Frequently Asked Questions

How do I install Intel App Preview?

• You can download and install App Preview from the app stores associated with your device. Search for “Intel App Preview” in the store.

Now that I have installed Intel App Preview on my testing device, what’s next?

• You can quickly and easily run your app without having to build and instal it on your device. To run your app on devices using the "local" option in App Preview your development system and test device must be connected to the same network and be on the same subnet. Be sure to select the "WIFI" option on the Test tab in the Intel XDK to enable this feature.

• Or, you can run your app on remote devices (that is, devices located on a different network from your development system) by pushing your project files to the Intel XDK test server via the Test tab. Your testing device must have Internet access via WiFi or over its mobile data connection. Be sure to select the "MOBILE" option on the Test tab and sync your app to the cloud by clicking the "PUSH FILES" button on the Test tab.

How can I simultaneously view edits to my Intel XDK project files on my mobile testing device, or remotely debug an app running on my Android device?

• Simultaneously view edits to your local project files on the same WiFi network:

1. Run App Preview on your device.
2. Run the Intel XDK on your development system.
3. Be sure the Intel XDK and the device running App Preview are on the same local subnet.
4. From the Intel XDK Develop tab’s Code view, click the Live Layout Editing tab.
5. Changes you make in the Intel XDK editor will be transmitted to your app running on your device.

• Debug or profile your app when connected with a USB cable to an Android device:

1. Run Intel App Preview on your Android 4.0 or higher test device.
2. Run the Intel XDK on your development system.
3. Connect your workstation to your Android test device using a USB cable.
4. On your Android test device, enable Settings > Developer Options > USB Debugging.
5. In the Intel XDK, click the Debug (or Profile) tab and follow the setup guide in those tabs. See the Debug tab instructions page for more details.

How can I simultaneously view edits to local project files on my development system without my mobile device?

• Run the Intel XDK on your development system.
• From the Intel XDK Develop tab’s Code view, click View in a Chrome Window or View in a Firefox Window.
• A preview pane appears in the selected browser on your desktop.

How do I limit access to those apps that I push to the test server?

• Do not share your Intel XDK userid and password or the QR code or the QR code's encoded link that references your app in the test server with others. If you wish to remove an app from the Intel XDK test server you can log into App Center using your Intel XDK userid and password and delete the project from the server using the trash can icon.

My remote device has Internet access and I have logged into my Intel XDK account, but how do I update the project files stored on the Intel XDK test server?

• After you have edited and saved the application project files on your development system, click the Test tab and sync your project files to the test server by clicking the "PUSH FILES" button. The "MOBILE" button in the upper-left corner of the Test tab must be selected.

Resources

• The Intel XDK products page: http://xdk.intel.com
• An overview of the Intel XDK: http://software.intel.com/en-us/html5/xdkdocs
• Intel XDK Live Development: http://software.intel.com/en-us/html5/articles/using-live-development