The source code for this sample can be found here: https://github.com/gomobile/sample-html5-support-test or download the Intel® App Preview Android, iOS or Windows Phone app to check out all the samples.

Introduction

When it comes to developing mobile apps that leverage HTML5 on various platforms such as iOS, Windows, Android or even Blackberry, it becomes evident that every platform doesn’t render or support the same features from CSS3 features to WebRTC and  libraries like WebGL. The purpose of the HTML5 Support Test sample is to provide resources for identifying supported HTML5 features in the native webView.  The resources that are made available are the following sites : http://html5test.com/ and http://rng.io/.  This information is important since all HTML5 (HTML, JS, CSS3) content is rendered in a webView when a native app (.ipa[iOS], apk[Android], .xap[Windows Phone], etc….) is built with the Intel® XDK Build System.

The UI of this sample was made to be a minimalistic design when the content is at the center of the user’s attention. The content for both the HTML5Test and Ringmark pages are embedded within an iframe which keeps the content in the app instead of in the native web Browser. As you can see above, HTML5Test running within the sample presents a 412 out of 555 points on an iPhone 5 running iOS 7. This score represents the rating amongst semantic, multimedia, 3D, graphics & effects, performance & integration, offline & storage features. HTML5Test presents its findings by using browser sniffing methods. Ringmark is another popular test suite that measures the tested browser’s capabilities in areas such as accelerated canvas, media, touch events, navigator, indexed DB and more.  Results are displayed in color coded As you may already know, HTML5 feature support has been growing with every new release of a mobile operating system. This is very evident in the Android ecosystem where updates are as frequent as six to nine months.

Design Considerations

The major feature of this app is to provide resources for viewing the support for the HTML5  standard on a mobile device. After opening the app, the only elements present are the two buttons (HTML5Test and Ringmark) and the HTML5 logo.

An iframe element is used to display the web pages within the sample instead of taking the users out of the application and into the browser. By default, the iframe has a display attribute of none and no URL set as a source. Another important attribute to note is the sandbox which as shown below restricts same origin requests, navigating content, form submission and scripts.

When the HTML5Test button is pressed, the iframe’s display attribute is set to inline and the sandbox to only allow scripts and same origin request. This allows the content to load with minimal restrictions. The same is done for displaying the ringmark webpage.