QNX® SDK for Apps and Media 1.0 QNX® SDK for Apps and Media 1.0 HTML5 Developer's Guide ©2012–2014, QNX Software Systems Limited, a subsidiary of BlackBerry Limited. All rights reserved. QNX Software Systems Limited 1001 Farrar Road Ottawa, Ontario K2K 0B3 Canada Voice: +1 613 591-0931 Fax: +1 613 591-3579 Email: [email protected] Web: http://www.qnx.com/ QNX, QNX CAR, Momentics, Neutrino, and Aviage are trademarks of BlackBerry Limited, which are registered and/or used in certain jurisdictions, and used under license by QNX Software Systems Limited. All other trademarks belong to their respective owners. Electronic edition published: Tuesday, August 5, 2014 HTML5 Developer's Guide Table of Contents About This Guide .......................................................................................................................5 Typographical conventions .................................................................................................6 Technical support .............................................................................................................8 Chapter 1: SDK Overview ............................................................................................................9 Chapter 2: Browser Engine ........................................................................................................11 CSS3 support .................................................................................................................14 HTML5 elements ............................................................................................................15 HTML5 offline web applications .......................................................................................16 Browser API support .......................................................................................................17 Chapter 3: Web Sandbox Model .................................................................................................19 Chapter 4: Developing HTML5 Apps ..........................................................................................21 The HTML5 development environment ..............................................................................22 Creating an HTML5 app ..................................................................................................24 Chapter 5: Creating Your Own Cordova Plugin .............................................................................25 The cordova.exec() function .............................................................................................27 Example: Using the PPS interface ....................................................................................28 Chapter 6: Enhancing Performance ............................................................................................33 Chapter 7: WebLauncher's JavaScript APIs .................................................................................35 WebLauncher application APIs .........................................................................................36 WebLauncher webinspector APIs ......................................................................................37 WebLauncher webview APIs .............................................................................................38 Chapter 8: Debugging Web Apps ...............................................................................................47 Enabling Web Inspector ...................................................................................................48 Launching Web Inspector ................................................................................................49 Debugging and profiling using Web Inspector ....................................................................50 Optimizing layout and style ..............................................................................................51 Inspect and modify element styles ..........................................................................52 Inspect and modify the DOM ..................................................................................52 Modify the box model for an element .......................................................................53 Analyzing page resources .................................................................................................54 Table of Contents View resource content ............................................................................................55 View resource network information ..........................................................................55 Analyzing network usage ..................................................................................................56 Apply a filter to display a specific resource type .......................................................57 Change which time measure is displayed .................................................................57 Reorder the list of resources ...................................................................................57 Debugging scripts ...........................................................................................................58 Set and use breakpoints .........................................................................................58 Pause script execution ...........................................................................................59 Pause script execution on exceptions ......................................................................59 Analyzing loading, script execution, and rendering times ....................................................60 Record browser engine activity ................................................................................61 Constrain the display to a specific time span ............................................................61 Filter which events are displayed ............................................................................61 Analyzing memory usage and processing demands .............................................................62 Profile the memory usage of your scripts ..................................................................62 Profile the performance of your CSS selectors ..........................................................63 Auditing your webpage ....................................................................................................65 About This Guide This guide explains how to develop optimal user interfaces for applications created with the QNX SDK for Apps and Media. This table may help you find what you need in this guide: To find out about: Go to: The QNX SDK for HTML5 and where to SDK Overview (p. 9) download it The WebKit-based browser engine Browser Engine (p. 11) HTML5 elements (audio, video, etc.) you HTML5 elements (p. 15) can use in your apps Using “sandboxing” so that applications Web Sandbox Model (p. 19) can run in complete isolation from each other The process for creating an HTML5 app Developing HTML5 Apps (p. 21) The HTML5 development environment The HTML5 development environment (p. and tools 22) Creating a basic application Creating an HTML5 app (p. 24) Creating plugins to extend your app's Creating Your Own Cordova Plugin (p. 25) functionality Best practices for optimal performance Enhancing Performance (p. 33) Weblauncher APIs (webview.create, WebLauncher's JavaScript APIs (p. 35) webview.status, etc.) Using Web Inspector to debug your apps Debugging Web Apps (p. 50) © 2014, QNX Software Systems Limited 5 About This Guide Typographical conventions Throughout this manual, we use certain typographical conventions to distinguish technical terms. In general, the conventions we use conform to those found in IEEE POSIX publications. The following table summarizes our conventions: Reference Example Code examples if( stream == NULL) Command options -lR Commands make Constants NULL Data types unsigned short Environment variables PATH File and pathnames /dev/null Function names exit() Keyboard chords Ctrl–Alt–Delete Keyboard input Username Keyboard keys Enter Program output login: Variable names stdin Parameters parm1 User-interface components Navigator Window title Options We use an arrow in directions for accessing menu items, like this: You'll find the Other... menu item under Perspective Show View. We use notes, cautions, and warnings to highlight important messages: Notes point out something important or useful. Cautions tell you about commands or procedures that may have unwanted or undesirable side effects. 6 © 2014, QNX Software Systems Limited Typographical conventions Warnings tell you about commands or procedures that could be dangerous to your files, your hardware, or even yourself. Note to Windows users In our documentation, we typically use a forward slash (/) as a delimiter in pathnames, including those pointing to Windows files. We also generally follow POSIX/UNIX filesystem conventions. © 2014, QNX Software Systems Limited 7 About This Guide Technical support Technical assistance is available for all supported products. To obtain technical support for any QNX product, visit the Support area on our website (www.qnx.com). You'll find a wide range of support options, including community forums. To obtain technical support for this product, visit the BlackBerry Support Forum. 8 © 2014, QNX Software Systems Limited Chapter 1 SDK Overview The QNX SDK for HTML5 provides a framework for developing and executing web-compatible applications, specifically using such technologies