BlackBerry 10

As a BlackBerry Elite developer, I had the opportunity of receiving one of the first public BlackBerry Z10 devices in BBJam Europe in last February. Publishing the second edition of my book Programming the Mobile made me push this post until now. The good news is that if you are a web or an app developer, BB10 is a truly HTML5 first class platform through its completely rewritten web browser and the native web developer platform WebWorks.

First: The platform has nothing to do with previous BlackBerry devices; everything you know about BlackBerry has to be updated. Even the browser doesn’t identify itself as a BlackBerry (more on this later).

In this post, I’ll go through the following topics:

• New devices: BlackBerry Z10 and Q10
• The browser and the native web app platform
• Device detection
• HTML5 support
• WebWorks

The first device already available on some markets is the BlackBerry Z10, a full touch device that is the first huge evolution in BlackBerry: no physical keyboard.  The second change is the operating system: BB10 is based on QNX and it’s a completely new operating system.

The Z10 includes a multi touch screen with a 1280×768 pixels resolution, touch gestures everywhere and typical modern sensors: accelerometer, gyroscope, magnetometer, lightning and proximity. I’ve made my entire test using a final Z10 device (the developer edition).

The second device -the BlackBerry Q10– was announced. It will be a device with a QWERTY physical keyboard and a square screen of 720×720 pixels. An experimental Alpha Device C is already available to developers emulating the Q10 factor. That’s the other device I’ve used for this post.

If you want to try test your web and apps without a device, BlackBerry offers a free virtual machine that includes the full browsers inside the Z10 and the Q10 (beta). You can download the emulators for free.

The Browser and the native web app platform #

The default browser on the BlackBerry 10 platform is a completely new app mostly created form scratch based on the WebKit engine. One of the key features of the browser is that is an HTML5 application. Again, the browser was completely written in HTML5 using HTML, CSS and JavaScript and wrapped as a native app.

The BB10 browser is one of the most advanced default preinstalled browsers on the mobile space, because of its performance and HTML5 compatibility. It’s the first default browser passing the Ringmark Level 1 test. And it even supports half of the Level 2 requirements.

BlackBerry also has brought HTML5 to the front through its native web app platform known as WebWorks. With WebWorks we can package and compile an HTML5 app and distribute it through the store AppWorld. On a WebWorks app we can take advantage of more advanced native-like API to get access and interact with the operating system.

If you create native apps with the Cascades framework (based on Qt) you can also use a Web View to create a hybrid app.

Device detection #

I’m not suggesting that we should use device detection. However, it’s important to understand how the browser identifies itself and how can we detect it for some specific situations.

The user agent on the Z10 looks like

Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+

Where is the BlackBerry word? Nowhere. The browser’s developers were forced to remove the “BlackBerry” keyword from the user agent because lots of websites -mostly from non-updated old CMSs and “mobilizers”- were just delivering a crappy website or even a WML website when a device identifies itself as “BlackBerry”.

Trying to start from scratch they use just the keyword BB10 to identify the platform. Unfortunately BlackBerry seems to be following Mozilla’s idea of not identifying the device model in the user agent.

Client-side detection can be done looking for the word “Research in Motion, Ltd.” in navigator.platform (even when the company is not called RIM anymore). We can detect the Q10 form factor (square screen) using media queries:

@media (device-aspect-ratio: 1/1) {  
   /* It's the BlackBerry Q10 */  
}

HTML5 support #

The BlackBerry 10 browser supports a big list of APIs as we can see in the updated Mobile HTML5 table. It has one of the highest scores in HTML5Test.com (485 points) and lot of un-prefixed CSS abilities, including some features that are still prefixed on other WebKit-based browsers. Besides typical modern HTML5, CSS and JavaScript support on other mobile platforms, BlackBerry 10 Browser includes:

• FullScreen API
• WebGL
• Media and Stream API (also known as getUserMedia) for live camera access (see image below)
• IndexedDB
• Web Notifications API (partially)
• FileSystem and File API
• W3C Touch events
• HTML5 Form input controls (even type=color)
• HTML Media Capture
• Network Information API (latest version, different from Android Browser implementation)
• Vibration API
• Animation Timing API
• Touch icon support through apple-touch-icon link element (150×150 pixels)
• Battery Status API
• Performance Timing API
• WebRTC preliminary support
• Non-standard Extensions, such as text-overflow: -blackberry-fade

BlackBerry 10 Browser supports the ability to read user’s camera on a website (image from Programming the Mobile Web book)

Background execution #

When the browsers get minimized, every website freezes so our JavaScript code won’t be executing. When the tab is being minimized and the user continues with the browser in foreground, our website continues execution but timer frequencies lower to 1 second. Remember for performance purposes we can use the Page Visibility API and the Animation Timing API. While in a background tab our page can also deliver web notifications (see bug consideration later in this post).

Home Screen #

The BB10 Browser supports the apple-touch-icon link element as the icon to use when users add a site to the Home Screen but it seems to ignore the sizes attribute. Standard BB10 icons are 150×150 pixels and PNG is recommended.

<link rel="apple-touch-icon" href="icon150.png">

While the browser is not working full-screen (no support for webapp meta tag) the navigator.standalone boolean value is exposed so it might be possible that a full screen webapp mechanism through a meta tag will be available soon (as in Safari on iOS, MeeGo and Symbian).

Responsive Images and Pixel density #

BlackBerry Z10 exposes a device pixel ratio of 2.2437500953674316 and BlackBerry Q10 a value of 2.075000047683716. Therefore BB10 remembers us how important is to query about pixel ratio ranges and not integer values. Lot of websites are just querying about pixel ratio=2 because iOS high-resolution devices are using that value.

If you are using media queries to provide high resolution versions of your bitmap images, you can use for BB10

@media (-webkit-min-device-aspect-ratio: 2) {  
   /* It includes any device with a pixel ratio >= 2 */  
}

Viewport and pixel density #

When using the viewport meta tag with width=device-width, BB10 will expose a 320px virtual viewport on all devices, maintaining the iOS standard. It’s important to understand that the BB Q10 has no landscape orientation (and remember, it’s a square screen anyway).

Comparison #

Compared to Google Chrome for Android, the BlackBerry 10 browser supports a more HTML5 APIs. Compared to Safari on iOS 6, it supports more APIs and the only missing API is Web Audio that was included in iOS 6.

Debugging #

BlackBerry 10 browser includes a full remote web inspector over HTTP (that is, connect your device to the same WiFi network as your desktop computer). Just enable it from the browser’s settings menu and you will get the URL to access it from a desktop browser. Just remember that anyone with that URL will be able to see and interact with your current opened sessions.

Using the developer tools from BlackBerry 10, we can use remote debugging through Wi-Fi

Bugs #

The Web Notifications API works, we can get user’s permission and deliver notifications. The device will show the notification on the Browser (red star) but there is no way to see the notification’s content or to understand which tab has generated the notification. The Web Notifications don’t appear to communicate with the Hub (the app that manages system notification on BB10).

CSS Regions spec seems to be there in the DOM, but I couldn’t make it work so I believe it’s a bug.

I’m quite confident that BlackBerry will solve these bugs in a future OS update.

WebWorks #

Using WebWorks to compile the app as native webapp, we have access to all the HTML5 APIs plus a series of platform specific APIs, as:

• BlackBerry Messenger
• Invoke
• In-app Payments
• Phone and Calls
• PIM
• Push
• User Interface specifics, such as Toast notifications and Cover customization (update the snapshot when the app is minimized)

Once compiled and signed, you can distribute and sell your HTML5 WebWorks app on the store (AppWorld). It’s great to see a platform supporting first-class HTML5 apps from the ground.

Wrapping up #

A browser created using web technologies is another great example of what HTML5 can do on today’s smartphones.

BlackBerry 10 Browser is a good example of what developers expect from a good mobile browser: hardware APIs, good performance, easy to use debugging tools, good documentation and a way to create webapps outside of the browser. We will always expect better support but the BlackBerry 10 default browser had an excellent start.

If you want to know more about every HTML5 API listed in this post, check my last book Programming the Mobile Web, 2nd edition