Cool … iPhone handles the HTML5 onstorage event handler

Ian Homer — Wed, 16 Sep 2009 17:08:05 +0000

… or in other words we can readily synchronise local browser storage with back-send server persistent storage. This is one of the fundamentals of compelling off line web applications.

So a little background. You may know that you can store data in your local browser database with javascript like …

function store() {
  if (window.localStorage) {
    var count=window.localStorage.getItem("count");
    if (!count) {
      count=0;
    }
    count++
    window.localStorage.setItem("count",count);
  }
}
window.onload = function() {
  store();
}

and you can even see it in action here, if you got a decent browser such as the latest iPhone 3, Firefox 3.5, Safari 4.

But this ain’t much good if you can’t get this data back to the server to do something useful with it, e.g. share with friends, share with your other devices, keep a backup, send a message … I could go on.

So what we really need is a way to easily listen out to storage events and deal with it in one place. Yep, we could create our own Javascript framework to do this and handle getters and setters, but that sounds nasty to me.

Instead we can know use the onstorage attribute on the HTML body tag to hook into a function that will handle all of these call backs based on local stored data.

function store() {
  if (window.localStorage) {
    var count=window.localStorage.getItem("count");
    if (!count) {
      count=0;
    }
    count++
    window.localStorage.setItem("count",count);
  }
}
function handleOnStorage() {
  myFunctionToSendDataToServer(event.key,
    event.newValue, event.oldValue);
}
window.onload = function() {
  document.body.setAttribute("onstorage", "handleOnStorage();");
  store();
}

Take a look at it in action here in the bemoko mobile test suite. It works on iPhone 3 and Safari 4. You can even see the complete code here.

iPhone 3.0 geolocation javascript API

Ian Walsh — Wed, 17 Jun 2009 21:04:42 +0000

With the iPhone 3.0 firmware released today, I thought I’d show you how to access one of the features I’ve been most looking forward to – support for the geolocation API in Safari means I can now create location aware websites.

This will be just a quick demo to retrieve and display the current longitue and latitude of your phone, along with a googlemap so we can see if the results are right. The more interesting applications will come….

To do this we’ll use javascript and the newly added Navigator.Geolocation interface to call the getCurrentPosition() function to retrieve the current longitude and latitude of the phone, which we’ll display and pass to the googlemaps API.

The code:

xml version="1.0" encoding="UTF-8"?>
DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iPhone 3.0 geolocation demotitle>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
<script>
function handler(location) {
var message = document.getElementById("message");
message.innerHTML =" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&zoom=16&key=YOURGOOGLEAPIKEY' />";
message.innerHTML+="Longitude: " + location.coords.longitude + "
";
message.innerHTML+="Latitude: " + location.coords.latitude + "
";
message.innerHTML+="Accuracy: " + location.coords.accuracy + "
";
}
navigator.geolocation.getCurrentPosition(handler);
script>
head>
<body>
<div id="message">Location unknowndiv>
body>
html>

The results:

Try it for yourself by pointing your Safari browser at http://bemoko.com/blog/iphonegeo.

Update 27/7/2009: I noticed the zoom level on the google static map API wasn’t being set so the map was zoomed all the way out. I’ve added a default zoom for the demo code above. Not sure if thats a new requirement from Google’s side?

bemoko's blog on mobile » javascript

Cool … iPhone handles the HTML5 onstorage event handler

iPhone 3.0 geolocation javascript API