Getting you bearings with JavaScript on iOS

This post is an extension of my previous post on accessing the gyroscope in your iOS device from JavaScript for a web application. So be sure to read that one first or you'll probably get squat.

New in iOS 5 is the ability to access the compass using JavaScript. This is done precisely in the same way as with all other «orientation data». The «deviceorientation» event on the window object will (on iPhone 4 or newer running iOS 5 and newer) contain two properties related to the compass, these are:

  • «webkitCompassHeading» [0-360°] - Where 0 is magnetic north
  • «webkitCompassAccuracy» - How many degrees the heading is off (-1 if error)
So for the demo I'm using the same arrow as in the gyroscope post, except now with gorgeous «north» and «south» indicators added. The goal of the demo is to make the arrow point towards north. When you're done playing with it, take a look at the source and amaze at its simplicity.

Further reading:

The HTML 5 History API

The HTML 5 History API will allow us to update the browser history and keep the all so important functionality of the back and forward browser buttons when the site is loading content dynamically using XMLHttpRequest.

You want to use XMLHttpRequests (AJAX) to avoid unnecessary page loads, hence reducing network traffic and therefore speeding up you web-app, you probably already do this in your web-apps. However, before the advent of the HTML 5 History API there was a problem with this otherwise smart approach to building web-apps. When a page updated it's content this would not be reflected in the browser history and you had to do a lot of work to make the back and forward buttons work as expected. Thanks to the HTML 5 History API this is now much simpler. In this article I'll explain an approach to "mimicking" a common server-side approach to "dynamic" page loading using parameters in the url, while retaining the functionality of the browser history. Take a look at the demo.

What this typical AJAX demo does is pretty basic:

  • At startup it loads a page depending upon the presence of a parameter.
  • When you click a link (at the top), it fetches and swaps the content of the "content" holder of the main page.
Pushed history items
However, after having clicked the links you'll also notice that the back and forward buttons are working, without actually navigating you away from the main page, like the're integrated with the app. Also, items are "pushed" onto the browser history, making it possible to navigate directly to a previously loaded page. It's just updating the content of the content box when you click a link, not the entire page. This is what happens:
  • When a link is clicked the new content is fetched using a XMLHttpRequest.
  • The current content is replaced and the browser history is updated.
All of these operations are accomplished using only three (3) API calls:
  • The «onpopstate» event allows us to listen to events fired when the history is being navigated, like when using the back button. (see line 57'ish in the demo code for how this is handled).
  • The «replaceState» method allows us to replace the current state in the browser history. This is used to create a state when for example on initial page load.
  • The «pushState» method allows us to add things to the history stack (it's a stack, hence push and pop).
Now, this does not work in all browsers (IE..duh!) and as of writing this post still has «Working Draft» status. However, support is pretty good and when Microsoft finally adds support in IE 10, all major browsers will support the History API.

Take a look at the demo and the source code (which is heavily commented) and feel free to use the source freely.

Bye!