Webentwicklung für das iPhone, Teil 3: CSS-Animationen und GPS-Daten im Browser

Aus dem
t3n Magazin Nr. 16

Jetzt kaufen

GPS aus Safari heraus nutzen

Die Übernahme der GPS-Daten in den Browser muss der User zuvor genehmigen.

Ein großer Teil der im Appstore verfügbaren Applikationen hat den einzigen Sinn, auf die Geokoordinaten des GPS-Moduls zuzugreifen, um diese dann an eine Webseite weiterzuleiten und den Rest von einer Webapplikation erledigen zu lassen. Der Grund hierfür ist, das es bisher nicht möglich ist, per Browser diese Daten abzufragen.

Diese Lücke will Apple mit dem kommenden iPhone OS 3.0 schließen. Es wird dann möglich sein, mittels JavaScript die Geokoordinaten abzufragen. Das besondere daran ist, dass diese Methodik tatsächlich Standardkonform ist, da sie zusammen mit dem W3C entwickelt wurde. Man könnte meinen, dass der Zugriff auf das GPS-Modul dennoch hoch kompliziert ist – aber das Gegenteil ist der Fall. Es lässt sich ganz einfach nicht nur die aktuelle Position bestimmen, sondern sogar ein Tracking, also eine Positionsverfolgung realisieren. Aber wie sieht das nun aus?

HTML

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Geo-Fun</title>
<script type="text/javascript">
function init(){
	navigator.geolocation.getCurrentPosition(doit);
}
function doit(position){
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById('geo').firstChild.nodeValue = latitude + ' - ' + longitude;
}
</script>
</head>

<body onload="init()">
<div onclick="this.className='changeit'"><label id="geo"></label></div>
</body>
</html>

Listing 7

Die Funktion „getCurrentPosition()“ übernimmt die Daten des GPS und stellt sie über „position“ zur Verfügung. Als Sicherheitsmaßnahme wird der Besucher gefragt, ob Safari das GPS-Modul überhaupt verwenden darf.

Um ein Tracking, also das Verfolgen der Position, zu ermöglichen, wird eine andere Funktion angesprochen:

JavaScript

// Tracking aktivieren
var watchId = navigator.geolocation.watchPosition(scrollMap);
// Tracking deaktivieren
function buttonClickHandler() {
	navigator.geolocation.clearWatch(watchId);
}

Listing 8

Bei jeder Positionsänderung wird die Wertänderung ermittelt und die Funktion scrollMap getriggert. Diese zeichnet die Position dann neu. Als Map könnte dabei wieder Google Maps zum Einsatz kommen. Die ermittelten Werte lassen sich dann wie sie sind weiterverarbeiten. So kann die Maps-Applikation angesprochen und als GET-Parameter die Koordinaten übergeben werden.

Fazit

Werden CSS-Animationen und Transitions richtig eingesetzt, kann man den Verzicht auf Flash verschmerzen. Auch die resourcenfressende Abarbeitung von umfangreichem JavaScript-Code kann so elegant vermieden werden. Durch die Hardwarebeschleunigung reagiert die Webseite wie eine Applikation.

Die neu hinzukommenden Funktionen, um auf das GPS-Modul aus dem Safari heraus zugreifen zu können, werden uns eine Flut neuer Möglichkeiten eröffnen, Webdienste ortsabhängig zu gestalten. Somit werden Hybridanwendungen im AppStore größtenteils überflüssig, denn Apple reagiert hier auf einen lange gehegten Wunsch der Webentwickler.

Der letzte Artikel der Serie erscheint in der nächsten t3n-Ausgabe:
Teil 1 (t3n Nr. 13)	Websites für das iPhone optimieren
Teil 2 (t3n Nr. 14)	Eine iPhone-Applikation entwickeln (Design und iUI)
Teil 3 (t3n Nr. 16)	iPhone-spezifische Features nutzen (CSS Transitions/Transformations, GPS)
Teil 4 (t3n Nr. 17)	Offline-Datenbankenanbindung (mit SQLite)

Die Autoren

Alexander Ebner arbeitet als TYPO3-Developer bei einem Münchner Reiseveranstalter. Als Entwickler setzt er seit Jahren auf PHP/MySQL und lernte dadurch auch TYPO3 als CMS kennen und schätzen. Patrick Lobacher (geb. Schuster) ist freier Entwickler, Autor, Mitglied in der TYPO3-Association und berät seit 1996 Unternehmen beim Einsatz von Webtechnologien, seit 2002 zunehmend im TYPO3-Umfeld.

Weitere Artikel zu Browser, Chrome, CSS, iPhone, Webentwicklung und WebKit