At the moment I’m attending the online course Mobile Web 2: Applications at W3 Tech courses. This post is a summary of the fourth week’s subject JavaScript APIs. (Please note: this is not a thorough objective summary of the course, but just the highlights that I found important for myself to remember.)

Geolocation

A simple example:

 if (navigator.geolocation) {
          navigator.geolocation.watchPosition(
              function (pos) {
                  $("#lat").text(pos.coords.latitude);
                  $("#lng").text(pos.coords.longitude);
                  $("#alt").text(pos.coords.altitude);
                  $("#hdg").text(pos.coords.heading);
                  $("#spd").text(pos.coords.speed);
              },
              function (err) {
                  $("#status").text("ERROR: " + err.message);
              }
          )
      }

Device orientation

The first part that needs to be understood is this cryptic alpha/beta/gamma system. The alpha component is the heading relative to North. Unfortunately it rotates in a counter-clockwise manner (which is to say that an alpha of 90 is West rather than East) so that in order to obtain a more typical heading one has to subtract alpha from 360 (using the West=90 example above you would then get 360 – 90 = 270°, which is the value most people would expect for a device pointing West). The beta component is the vertical rotation. That is to say that a device laying flat on its back with its screen pointed up will have a beta of 0, and if it is moved to stand vertical with the top of its screen pointing up it will read at 90. The gamma component is the remaining rotation axis.

Touch events

In order to prevent the default zooming behaviour, you can return to the meta viewport element as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

Local Storage

To persistently store data locally is the simpler alternative: Local Storage. The more complex (but more powerful) approach, IndexedDB, is a large API and at times difficult feature the details of which are still being ironed out.

Local Storage is a simple key-value store, in which the keys and values are strings. There is only one store per origin. This functionality is exposed through the globally available localStorage object.

If you wanted to keep a simple counter of the number of times a given user has loaded your application, you could use the following:

var counter = localStorage.getItem("count") || 0;
counter++;
localStorage.setItem("count", counter);

Deleting a key completely can be performed through removeItem, and if you wish to reset the entire store, simply call localStorage.clear().

Local stores can also be iterated through in order to list all the content that they contain. The order is not guaranteed.

for(var i =0, n = localStorage.length; i <n; i++){     var k = localStorage.key(i);     console.log(k +": "+ localStorage[k]);}

Note that if all you need is to store session-based data in a manner that is more powerful than cookies, you can use the sessionStorage object which works in the exact same way as localStorage but the lifetime of which is limited to a single browser session.

Websockets

Note that if all you need is server-push rather than a duplex conversation, then another simpler technology called Server-Sent Events can work for you.

Future technics

System notifications
Page visibility