«
»

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

This entry was written by and posted on Tuesday, November 23rd, 2010 at 12:31 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. #1 written by Abraham November 23rd, 2010 at 04:20

    Box shadow inset works too! ;)

    RE Q

  2. #2 written by Richard Drysdall November 23rd, 2010 at 05:26

    It would be great if someone could put together a test page that demonstrated all the new features (hint hint).

    RE Q

  3. #3 written by firt November 23rd, 2010 at 05:30

    Richard, you can use the sample ad.ag/wjmtgt for Accelerometer. For the other APIs, there are many samples out there, like for WebSockets API in http://www.html5rocks.com.

    Thanks for the comment!

    RE Q

  4. #4 written by Jake November 23rd, 2010 at 05:38

    This is great info! Thanks so much. BTW… I believe the required and :valid/:invalid form support were added in 4.1.

    RE Q

  5. #5 written by Lee November 23rd, 2010 at 05:41

    @font-face seems to work!!!! (in limited tests)

    RE Q

  6. #6 written by nasilis November 23rd, 2010 at 06:01

    onhashchange is working on version 4.0.1 too

    RE Q

  7. #7 written by richtaur November 23rd, 2010 at 06:05

    Ehh, some good stuff but not what I was hoping for. #1 on my wishlist is speed, so a faster JS engine and/or canvas acceleration would make me happy.

    Still, I look forward to playing with the accelerometer!

    RE Q

  8. #8 written by John Laur November 23rd, 2010 at 06:36

    @font-face has worked for a long time on iOS given some specific caveats. However, the new news on web fonts in 4.2 is that iOS now prefers the TTF version of a font over the SVG version (formerly SVG was the only format supported.)

    The other nice thing about web fonts on 4.2 is that they now work in offline webapps. This was a big deal for me and I only discovered it by luck. Still; this will be a pretty handy feature for a lot of folks I think.

    RE Q

  9. #9 written by Ilya Berelson November 23rd, 2010 at 07:09

    awesome! my favorite change is onhashchange , that was so annoying to see that it didnt work on mobile.

    RE Q

  10. #10 written by Mathias November 23rd, 2010 at 08:12

    Can you explain what the “global RGBColor constructor” is for and how it can be used?

    RE Q

  11. #11 written by yaanno November 23rd, 2010 at 09:04

    Nice write up, thank you for sharing!

    RE Q

  12. #12 written by Matteo Spinelli November 23rd, 2010 at 09:06

    nice post, but I thought onhaschange was supported since iOS4.0

    RE Q

  13. #13 written by Felix Niklas November 23rd, 2010 at 10:21

    Maximiliano, on your accelerometer test page you wrote:

    “Maintain your device in portrait orientation for better results (youn can lock it)”

    Do you mean the hardware lock on the ipad or is there now a javascript way to prevent the orientation change? Man, that would be awesome!

    RE Q

  14. #14 written by sidepodcast November 23rd, 2010 at 11:36

    am struggling to get inline svg working on 4.2.

    an svg line chart on the following page renders fine in chrome/ie9 but refuses to appear in ios 4.2: http://sidepodcast.com/rankings

    RE Q

  15. #15 written by Dan Jeffrey November 23rd, 2010 at 11:48

    I’ll be interested to test whether or not cached / offline audio on the element is now supported.

    RE Q

  16. #16 written by sidepodcast November 23rd, 2010 at 11:55

    ahh, it looks like inline svg is supported in xhtml documents only. this svg document works just fine on 4.2: http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml

    i guess the new html5 parser isn’t supported yet: http://webkit.org/blog/1273/the-html5-parsing-algorithm/

    RE Q

  17. #17 written by firt November 23rd, 2010 at 12:00

    Felix, I mean hardware lock. I could not find any way yet to avoid orientation changes from a website. It should be a supported feature with a meta tag.

    RE Q

  18. #18 written by Gav November 23rd, 2010 at 12:54

    Anyone know if “server side events” are supported in 4.2 (http://dev.w3.org/html5/eventsource/)

    RE Q

  19. #19 written by Robert November 23rd, 2010 at 13:11

    Interesting article.. especially as the support is now finally really useful.

    The ability to detect device orientation (onorientationchange()) has been supported for some time now (certainly well over a year).
    I have used this to produce iPhone-optimised sites that react to device orientation before.

    Now we can do some more fun stuff!

    RE Q

  20. #20 written by shpyo November 23rd, 2010 at 13:12

    This is awesome!!! Now i have to do something similar! :)

    RE Q

  21. #21 written by firt November 23rd, 2010 at 13:13

    Gav, EventSource constructor is available now, but I didn’t test it. I believe we need to wait until documentation release to see what kind of server-side events are supported, if any.

    RE Q

  22. #22 written by Matthijs November 23rd, 2010 at 13:21

    HTML5 features look promising. It won’t be long or people will find a nifty way to show these properties off. Can’t wait :)

    RE Q

  23. #23 written by Felix Niklas November 23rd, 2010 at 13:26

    Ah okay. And a meta tag would probably also make more sense.

    RE Q

  24. #24 written by Terraloader November 23rd, 2010 at 15:24

    Nice article and good new features. The only thing im missing is support for offline-audio. i need only short sounds or words to play. and background-audio-playback too.

    RE Q

  25. #25 written by Andrea November 23rd, 2010 at 16:10

    Have looked at the accelerometers exaple, and behaved strangely.

    Loook here http://www.omiod.com/i.htm for the fixed version, now really smooth as expected.

    RE Q

  26. #26 written by Julian November 23rd, 2010 at 16:15

    I wrote a slightly more useful test page here http://bit.ly/eAVRYc
    It moves a box in 2 dimensions based on the gyro.

    Neat.

    RE Q

  27. #27 written by Black Bloke November 23rd, 2010 at 16:31

    Does mobile Safari pass the Acid2 test yet?

    RE Q

  28. #28 written by Jon November 23rd, 2010 at 17:54

    @ sidepodcast

    Yes, according to HTML5Test.com, there is no HTML5 parser and consequently no inline SVG or MathML.

    RE Q

  29. #29 written by Kevin November 23rd, 2010 at 19:30

    Any word on changes to how the iPad and iOS4.2 handles html5 video? We’ve been using an autoplay fix / hack that has stopped working.

    RE Q

  30. #30 written by Bart Burkhardt November 23rd, 2010 at 19:38

    JS engine is still terribly slow…..

    RE Q

  31. #31 written by Florian November 23rd, 2010 at 20:13

    What about CSS position: fixed, overflow scroll or frames?

    You know, I’m really in doubt of the merits of apple implementing html5 when it doesn’t even manage to implement plain old CSS 2.0 and HTML 4.0. Aproximately correctly.

    RE Q

  32. #32 written by Fabrice W. November 23rd, 2010 at 20:35

    3D Cube Gyroscope for iPhone 4 and iPod Touch 4G. Works best on the Homescreen.

    RE Q

  33. #33 written by Tomas Kapler November 23rd, 2010 at 21:56

    Regarding the orientation lock – now you “can” – just detect the orientation and when in the position, when iPhone rotates 90°, rotate the body -90% -webkit-transform:rotate(-90deg) and vice versa.

    RE Q

  34. #34 written by Ryan November 23rd, 2010 at 22:32

    Great post will have plenty to play with now. One thing though EventSource has been supported since iOS4.0 so it’s not new for 4.2.

    RE Q

  35. #35 written by Greg November 23rd, 2010 at 23:15

    contentEditable? no……. :(

    RE Q

  36. #36 written by gisc November 24th, 2010 at 05:55

    HTML5 audio tag works too.

    RE Q

  37. #37 written by FabriceW November 24th, 2010 at 09:18

    @Fabrice W.
    Sorry here the Link to my 3D Gyroscope Demo: http://bit.ly/dHcgxp

    RE Q

  38. #38 written by Felix Niklas November 24th, 2010 at 11:28

    @Thomas hah, cool workaround – gonna try it!

    RE Q

  39. #39 written by Derek November 24th, 2010 at 11:39

    Great article, good info. I took the Accelerometer example and spiced it up a bit just for fun : http://mediaupstream.com/sandbox/accel

    RE Q

  40. #40 written by Philipp Lenssen November 24th, 2010 at 15:09

    I got a bunch of JavaScript/ PhoneGap based games out for the iPad and testing one of them on my new iOS4.2 install, it seems like it runs faster (well, my timer is fixed, but there are no small lags anymore when the screen is very busy with sprites). Nice! (Side-note: this change also means one needs to remember to test on both iOS if there is speed-crucial JS.)

    Caveat: This speed comparison is by no means scientific — I just checked my app and activated as many sprites as I could and didn’t get any lags. Anyone wants to do a real speed test of drawing sprites for old iOS vs new iOS on iPad?

    RE Q

  41. #41 written by Christoph Pojer November 24th, 2010 at 18:27

    I have made a couple of examples for DeviceOrientation and DeviceMotion here: http://cpojer.net/Orientation I also made a small demo video: http://www.youtube.com/watch?v=yWE5hcBhr50

    RE Q

  42. #42 written by Davey November 24th, 2010 at 18:29

    I am noticing that playback through and tags has to be use-action initiated. You can no longer use javascript to start playback through ajax or something like setTimeout. @font-face seems to work better, though.

    RE Q

  43. #43 written by Jake November 25th, 2010 at 04:42

    input:invalid {background-color: yellow;}

    Maybe Apple knows something we don’t!

    They like one character top-level domains names.

    RE Q

  44. #44 written by Jake November 25th, 2010 at 04:43

    <style>
    input:invalid {background-color: yellow;}
    </style>
    <input type=”email” required>

    Maybe Apple knows something we don’t!

    They like one character top-level domains names.

    RE Q

  45. #45 written by Rob November 25th, 2010 at 05:40

    You can use parseFloat() instead of parseInt() in the accelerometer demo to smooth the movement. I first thought the accelerometer data was too crude, but now it moves nicely.

    RE Q

  46. #46 written by Michael N. November 25th, 2010 at 07:09

    @sidepodcast regarding “inline SVG”

    Inline SVG in xhtml documents has been supported since iOS 2.1 (Sept 2008), see here
    http://www.flickr.com/photos/mac/2876038626

    In my accelerometer example http://vis.uell.net/pyramids/12te/iPad.html

    I patched inline SVG in html documents using the SVG Web library which mainly serves the purpose of rendering SVG in Flash on older versions of Internet Explorer but also allows mixing SVG in plain html.

    RE Q

  47. #47 written by Nicky November 26th, 2010 at 00:18

    Can anyone tell me why my orientation button now only turns off music. Is there another button that I don’t know about. Please help

    RE Q

  48. #48 written by Nicky November 26th, 2010 at 00:19

    Can anyone tell me why my orientation button now only turns off music. Is there another button that I don’t know about.

    RE Q

  49. #49 written by Nick November 27th, 2010 at 15:17

    You’re missing a very key element that they added in that nobody is covering; they allow local cache to extend to 10mb from 5mb now letting image-centric web apps run completely offline.

    RE Q

  50. #50 written by Andrew Hedges November 28th, 2010 at 23:34

    EventSource has been supported since iOS 4.0.

    http://ahedg.es/w/eventsource.html

    RE Q
Comment pages

SetPageWidth