Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support

iOS 4.2 is a free update for every iPhone, iPod or iPad device available now. This new release provides some major changes on HTML5 and W3C future standards support, like WebSockets and Accelerometer support, print support, new JavaScript data-types and better SVG support.


Apple didn’t update yet Safari documentation to reflect these new APIs. This information is based on JavaScript research and testing over Safari itself I’ve been doing. The list of new features I’ve detected are:

  • Accelerometer & Gyroscope support through the DeviceOrientation API
  • WebSockets API from HTML5
  • Updated HTML5 Form Support
  • Partial XHR-2 Support
  • Print Support
  • New JavaScript data types
  • New DOM events
  • Enhanced SVG and Canvas support

Accelerometer & Gyroscope support

As you may know, all iOS devices have accelerometer sensors (plusmagnetometer and gyroscope on some devices). However, as web developers, we didn’t have access to such sensors until now. Safari now supports the DeviceOrientation API (W3C draft). Looking at the available objects, it seems that all the API is fully supported (including ondeviceorientation and ondevicemotion events); I could only get accelerometer data with success.

UPDATE: Apple has just released the API documentation: accelerometer and gyroscope supported. See DeviceMotionEvent Class Reference and DeviceOrientation Class Reference.

If you have an iOS 4.2 device, go to ad.ag/wjmtgt from Safari browser. I’ve coded a sample in 15 minutes using JavaScript and some CSS3: it’s the typical ball moving on the screen regarding the iOS device’s position. The next video shows this sample in action:

The API detects and delivers accelerometer data 50 times per second. To get them you need to capture ondevicemotion event on the window global object (or using addEventListener with devicemotion as the event name) and then use the accelerationIncludingGravity property on the DeviceOrientationEvent parameter. It has three values, x, y & z, representing the acceleration in m/s2 for each axis. You should use typical accelerometer math for games, effects or CSS transformations.

UPDATE: If the device has gyroscope (iPhone 4 or iPod Touch 4G) then you can use acceleration instead of accelerationIncludingGravity.

window.ondevicemotion = function(event) {
// event.accelerationIncludingGravity.x
// event.accelerationIncludingGravity.y
// event.accelerationIncludingGravity.z
}

UPDATE: For gyroscope, you need to capture ondeviceorientation and read alpha, beta and gamma properties from the event parameter, giving us angles (between 0 and 360) for detecting rotation changes.  Remember that not all iOS devices supports gyroscope, so you will not receive this kind of events on iPod before 4G, iPad or iPhone 3GS or older.

window.ondeviceorientation = function(event) {
// event.alpha
// event.beta
// event.gamma
}

WebSockets

The other big new update is WebSockets support. WebSockets is a W3C HTML5 API currently in draft that allows JavaScript to use an open, bi-directional full-duplex connection to a server using TCP sockets. This is a great news for chat and real-time applications that will reduce AJAX periodic calls.

You will need a web server understanding the new WS protocol through an HTTP handshake. You should always rely on a fallback mechanism if WS is not supported on the server, or because of a proxy/gateway.

HTML5 Form Support

Besides the HTML5 Form support I’ve already discussed on the book, now we have support for the required boolean attribute and the new :invalid CSS pseudoclass. Therefore, the following code will show a green input text when completed and a yellow one when incomplete:

<style>
input {
background-color: green;
color: white;
}
input:invalid {
background-color: yellow;
}
</style>
<input type="text" required>

AJAX 2

The W3C draft called XMLHttpRequest Level 2 (aka AJAX 2) adds new features to the XHR object and functionality. From that specification, now Safari supports the FormData object that allow us to send form data via AJAX easily.

Print Support

iOS 4.2 includes AirPrint, a wireless printing solution. Therefore, we can use now window.print() to invoke the printing dialog on Safari.

New JavaScript Data-types

Safari now supports the Blob class and many integer-type collections, like Float32Array, Int8Array, Uint8Array, Int16Array Uint16Aray, Int32Array and UInt32Array defined on Typed Arrays specification. More information on Firefox website.

New DOM events

Besides the new motion events, now we can use the HTML5 new onhashchange event that detects changes on the URL after the hash (#) for AJAX-like webapps; the invalid, onbeforeload and onpopstate events from HTML5 draft specification.

UPDATE: It appears that Event Source API (W3C draft) is also implemented through the available EventSource class to receive server-side events.

UPDATE: I’ve receive some comments about onhashchange being supported from 4.0 or 4.1 versions.

Now, we can also use window.captureEvents and window.releaseEvents to capture events in a global way.

Enhanced SVG and Canvas support

iOS supports SVG as a separate document and also inline SVG (using the svg tag). And now we can also create SVG documents on the fly using a list of more than 20 classes SVG____, like SVGDocument, SVGImage directly from our code.
From HTML5 Canvas, there is now support for ImageData data-type, a way to manipulate images pixel by pixel from JavaScript.

Other stuff

  • A styleMedia API that allow us to make CSS Media Queries from JavaScript. See API.
  • A WebGLRenderingContext class available, part of the 3D Drawing API (aka WebGL). However, I’m not seeing any real WebGL support.
  • A global RGBColor constructor

I will continue testing new HTML5 features and APIs available in this new release. Do you know any other new feature? Feel free to contact me by twitter (@firt) or commenting this post.

Share

Comments, ideas, questions?

Loading Facebook Comments ...
  1. #1 written by Toni December 2nd, 2010 at 11:36

    We launched so called shout along feature based on the accelerometer on Monday. Check out the accelerometer in action on Sofanatics: http://bit.ly/shakealong

    RE Q
  2. #2 written by Bob Moore December 2nd, 2010 at 21:15

    Repost from yesterday –>

    Here’s another modified version of the accelerometer demo with the moving ball. Based on the mods by @Andrea. I’ve optimized the JavaScript and added CSS3 xforms which are hardware accelerated on the iPhone/iPad.

    http://bit.ly/ehQ0Ia

    RE Q
  3. #3 written by Jerome December 8th, 2010 at 14:44

    The method webkitEnterFullScreen is now also available !!! Great for making a true HTML5 video player :)

    RE Q
  4. #4 written by Chris Grayson December 13th, 2010 at 22:14

    I’m curious if there is a way to access the accelerometer to override screen rotate. For instance: If you have a page designed to fit into the Safari browser window specifically in portrait view. And you don’t want the page to change orientation when the iPhone is rotated. I’m not talking about a user-initiated disabling. Something that can be done on a specific page. Seems like you could look at the accelerometer data and negate the rotation. Any thoughts?

    RE Q
  5. #5 written by firt December 13th, 2010 at 23:55

    Chris,

    There is no way to do that (override screen rotate) up to now. It should be implemented with a Meta tag by browsers because the screen rotation happens on the native side. There are some hacks, like rotating the main content using CSS 3 transformations, but the Safari UI is rotated anyway and generates a lot of problems.

    You can always embed your webapp in a native app (hybrid) and force one orientation. Check Chapter 12 of Programming the Mobile Web for info about that or I can send you some ideas. If you need a discount code for the book, just ask me.

    RE Q
  6. #6 written by numan January 12th, 2011 at 08:54

    Is access to camera or photo library on the horizon soon? This is one feature that keeps me switching from native to the web world.

    RE Q
  7. #7 written by Kostikis June 24th, 2011 at 17:05

    I am having problems with ondevicemotion on rotationRate values. It’s giving me very odd values, far away from what I am getting from SensorData and the sampling rate on both platforms is 20Hz. Any ideas?

    RE Q
  8. #8 written by Kostikis June 26th, 2011 at 12:31

    Now I noticed that you said the API (DeviceMotionEvent) detects and delivers accelerometer data 50 times per second. When I am trying to do that along with a timer I only get a 20Hz sampling rate. Am I doing something wrong or is the sampling rate user configurable?

    RE Q
  9. #9 written by Galileo October 6th, 2011 at 13:15

    Is it possible to activate the camera on the iPad 2, and also take pictures with it using html5/java?

    RE Q
  10. #10 written by firt October 7th, 2011 at 01:31

    Not yet unfortunately, you can do it on Android 3

    RE Q
  11. #11 written by James Anderson May 24th, 2012 at 20:48

    Can you please tell me if there are any HTML 5 limitations for iPad Safari, or does it fully support it?

    I have just had someone say a site we wanted to build has too many affects for the iPad version of Safari

    RE Q
  12. #12 written by firt May 24th, 2012 at 23:51

    James, your question has no answer, because there is no concept of “fully support HTML5″. HTML5 is a limitless concept so all the browser are somehow compatible by default. You need to list all the features you want to use on Safari for iPad and then you can answer is that current version of that browser supports or not what you need. Regards!

    RE Q
  13. #13 written by James Anderson May 25th, 2012 at 08:48

    Thank you for the reply,

    RE Q
Comment pages

SetPageWidth