BlackBerry PlayBook Browser HTML5 support

2011 will be remembered as “the tablet year“. In a few months we will have at least 10 different tablets from major vendors in the market, including the one that started this new category, Apple iPad (iOS) and the followers Samsung Galaxy Tab (Android), RIM PlayBook (Tablet OS), Motorola XOOM (Android 3.0) and HP TouchPad (webOS).

In this case, I’ve made a research inside the RIM/BlackBerry PlayBook’s Browser that is available today inside the PlayBook Simulator. If you want to install it and try it for your self, see the “Mobile Emulators Ultimate Guide”. This is just a pre-release version of the OS and the browser, so it may have some little differences with the final version to be released in next months.

The browser, called just “Browser” inside the QNX-based Tablet OS, has a WebKit-based engine with an excellent HTML5 and new API’s support. In fact, it’s just behind Safari on iOS in terms of modern mobile browsers.

HTML/HTML5 webapp support #

First of all, the PlayBook allows us to create three kinds of HTML5 experiences:

• Browser-based webapps: just a website hosted on the web with an URL
• Packaged webapps aka WebWorks apps: a compiled ZIP package with the contents of the webapp. A widget API is available.
• AIR applications: with an embedded web browser using a hybrid technique.

The browser supports HTML5 and CSS3 like other modern mobile browsers.

Features available #

It supports also some key APIs not available so much out there: Web Sockets, Web Workers and DeviceMotion API (the one I’ve discovered on iOS 4.2 for accelerometer detection). I should wait to test the accelerometer on the real device, but the API is available on JavaScript.

The browser supports:

• CSS3 new visual effects
• CSS3 animations
• CSS3 2D transformations
• CSS3 transitions
• SVG and inline-SVG
• Touch events & device orientation events
• Viewport meta tag
• Data URI for embedding images
• File uploads
• Font-face
• Web SQL API
• Web Sockets API
• Web Workers API
• Device Motion API (aka Accelerometer API)
• W3C Geolocation API
• HTML5-classic stuff: AppCache, Canvas, new input types, contenteditable, video & audio (even it’s not working right now on the emulator).

What APIs are not supported yet? 3D Transformations (like the one available on iOS), IndexedDB and WebGL (there is no mobile browser supporting it right now, but in iOS 4.2 is available but not working).

Plugins and extensions #

Talking about plugins, the browser claims to have two:

• Flash Player 10.1
• JNEXT Framework (JavaScript to native bridge).

I didn’t try the JNEXT Framework yet, but the framework site looks promising. I don’t know yet if we can access native code from a browser webapp or if it is restricted to packaged webapps. There is also a qnx.callExtensionMethod function available for connecting JavaScript code with Adobe AIR applications. I’m not sure if we can use it for a non-AIR application.

Using the browser #

The browser is still in a beta stage: I had to restart it many times while doing my testing (for example, testing sms: protocol links).

Opening popups with window.open creates a new tab and there is no simple closing mechanism. For tabbed browsing, you need to use your fingers to create a swipe down gesture from the middle-top of the screen.

Browser identification #

The user agent of the browser is

_Mozilla/5.0 (PlayBook; U; RIM Tablet OS 1.0.0; en-US) AppleWebKit/534.8+ (KHTML like Gecko) version/0.0.1 Safari/534.8+_

As we can see, there is no “mobile” or “BlackBerry” words on the user agent. That situation will lead current sites to not redirect them to small mobile versions automatically.

The funny stuff #

As other WebKit-based browsers, navigator.vendor returns “Apple Computers, Inc” and navigator.product return “Gecko”.

Hopefully I will test this and other tablets in the Mobile World Congress to upgrade this information.