Native APIs in the browser? How HTML5 tends to bring more from the native world to mobile browsers.

No comments
The old web
How Yahoo looked back then.
Ah the 2000s, websites with all that animations and noised gifs, blue underlined links, and ugly layouts. I'm sure you remember trying to find on which tab (yeah, tabs! They were a brand new feature back then) that annoying music was playing, and I bet you found it on that Flash website you forgot to close. And talking about Flash, what to say about that cool animations up and down and "trigger" songs whenever you hovered a menu with the mouse.

I remember learning how to add videos and songs to my pages, back then it was "only" possible with stuff like Flash. In fact any kind of complex interaction needed external plug-ins. The browsers itself only provided the basic, and Flash/Applets were everywhere, used to fill the gaps left by archaic rendering engines from archaic browsers.

But this was a decade ago, in the meantime a lot of things changed. The web changed. And browsers became smart, quick and better. Most of the features that before would need external plug-ins or a handful of plucked hair to be brought to a browser, now are achievable extremely easily. And with the rising of mobile devices, things are getting even more interesting.

A new era for web

HTML5 came as a hope to add semantic patterns and APIs that before were not even imaginable to have in a browser (especially mobiles) thus making things painless for developers and allowing the interaction between browser and OS to be smooth.

Before this new standard, things like vibration, local storage, and camera access on a mobile webapp were only possible with frameworks like PhoneGap (now known as Cordova) or Titanium,  which generally worked as wrappers for the webapp, doing the "messy job" communicating with the mobile SO and then providing an API that could be accessed via JavaScript by the dev. And this is basically what HTML5 is bringing, but as native, letting us communicate directly with the phone software and hardware. No need for wrappers, the browser is the wrapper. Wanna see it live?

I've prepared three simple mobile examples, so catch your HTML5 supported smartphone and prepare to do some tests.

Example #1, Vibration:

Supported by (on mobiles): Chrome / FF 11+

The Vibration API is meant to be a tactile feedback to the user after some action or for a notification within the app.

To do the trick, this is the code:

navigator.vibrate([500, 300, 100]);
Here you can see a live example.

Basically, what this code do is let you define an time, or an pattern for the phone to vibrate. The pattern is an array that use the order "vibrate, interval, vibrate, ...", both values are in milliseconds.

Simple, right? You can read more about it here, and see which browsers will support it in the future here.

Example #2, Camera:
Supported by (on mobiles): Safari 6+/ Chrome / FF 20+

Remember the first time you tried to use <input type="file"> into a mobile browser? Yeah, didn't worked, right? But now it does, here is how you can use it:
<input type="file" accept="image/*" capture="camera">
Here you can see a live example.

This will return the picture you just shoot, now is you who decide what to do with it. Send to server, use JavaScript to draw it in browser, etc.

You can read more about it here.

Example #3, Battery:
Supported by (on mobiles/desktops): FF 10+

Checking user device's battery can be useful to prevent user input losses on your webapp, or to slow down some actions that may drain its battery. Here is how you can get battery level:
navigator.battery.level //returns float between 0-1 where 0 is 0% and 1 is 100% of charge
Here you can see a live example.

There are many other options and event handlers on navigator.battery, you can listen when battery is charging or not, if its charge level changed, etc. And yes, it works in notebooks too.

You can read more about it here.

These examples, despite the simplicity, show a little of the potential that HTML5 is bringing to developers and webapps.  Of course there is a lot of things that are still under development, even these examples aren't supported by all browsers (yet!), but the goal is to show you that the future of web is extremely promising, and soon we will be able to use these features to make even more complete web applications.

We from Crux see this brighting future and are already preparing to the framework to be part of it.

No comments :

Post a Comment