Montag, 29. Juni 2009

Generierung von Offline Webapplikationen mit HTML 5 / Beispiel auf dem iPhone

Geschrieben von

in Programming um 16:42

In den Artikeln "Track'n'Mash: Geolocation mit dem Safari auf dem iPhone mit OS 3.0" und "Clientseitige Datenspeicherung im Safari mit Javascript und SQLite" wurde bereits auf einige Möglichkeiten eingegangen, die mit dem kommenden HTML 5 Standard möglich sind. Eine sehr interessante Spezifikation innerhalb von HTML 5 ist die "Offline Web applications API". Dem Entwickler wird dadurch die Möglichkeit gegeben, eine Webapplikation als "echte" "Offline Applikation" zu erstellen. In Kombination mit clientseitiger Datenspeicherung eröffnen sich dadurch gänzlich neue Möglichkeiten, die anhand eines Beispiels auf dem iPhone mit OS 3.0 erläutert werden.

Grundlage des Beispiels, soll die HTML Datei 'database.html' aus dem Artikel "Clientseitige Datenspeicherung im Safari mit Javascript und SQLite" sein. Erweitert wird die Datei unter der Prämisse, sie als Applikation auf dem iPhone zu nutzen. Das HTML-Grundgerüst vor der Anpassung um als Offline Webapplikation zu agieren:

Die erste Erweiterung betrifft den DOCTYPE: <!DOCTYPE HTML>. Sehr minimal und gut zu merken. Dieser Doctype ist Browsern ohne HTML 5 Unterstützung natürlich unbekannt aber dieser Fall wird meist mit einer Schaltung in den Standard-Modus begegnet.

Im nächsten Schritt wird dem Client-System bekanntgegeben, welche Dateien gecached werden sollen. Das <html> Tag wurde dazu um das Attribut manifest erweitert: <html manifest="manifest.php">. Die Manifest-Datei beinhaltet die Dateien, die lokal gespeichert werden sollen mit absoluter oder relativer Pfadangabe. Die HTML-Datei, die vom Client aufgerufen wird, muss nicht erwähnt werden. Wichtig ist, dass die Manifest-Datei mit dem Content-Type text/cache-manifest ausgeliefert wird. Entsprechend ist entweder der Apache zu konfigurieren oder die Manifest-Datei wird z.B. als PHP-Skript mit entsprechendem Header ausgeliefert:

<?php
header("Content-Type: text/cache-manifest; charset=UTF-8");
?>
CACHE MANIFEST

bild_bsp1.png
bild_bsp2.png
html_bsp1.html
html_bsp2.html

In diesem Fall wird der HTML 5 fähige Browser angewiesen, die im Manifest referenzierten Dateien im Offline Cache zu speichern. Das Team vom Yahoo! User Interface Blog hat durch Versuche herausgefunden, dass Dateien mit einer Größe > 25 k nicht gecached werden. Dieses Verhalten sollte beachtet werden! Das Manifest kann weiterhin noch eine NETWORK: Direktive beinhalten. Diese Dateien, bzw. Aufrufe, werden nicht gecached. Falls sich im Manifest referenzierte ändern sollten, erfährt der Cache kein Update. Eine Änderung des Caches muss erstens durch eine Änderung in der Manifest-Datei erfolgen. Im zweiten Schritt wird das Update explizit über Javascript getriggert:

var webappCache = window.applicationCache;
console.log("Cache status: " + webappCache.status);
if (webappCache.status == 4) {
webappCache.update();
console.log("Updating the cache");
webappCache.swapCache();
} else {
console.log("Nothing to do...");
}

Status "4" besagt "UPDATEREADY", weitere mögliche Status-Codes währen:

UNCACHED = 0
IDLE = 1
CHECKING = 2
DOWNLOADING = 3
OBSOLETE = 5

iPhone spezifische Anpassung und Referenzierung der Applikation auf dem "Home Bildschirm"

Die bisher beschriebene Vorgehensweise ist allgemeingültig für Browser mit HTML 5 Unterstützung. Explizit für die iPhone Optimierung wird in der HTML-Datei noch ein "Touch Icon" referenziert. Dieses Icon wird später die Oberfläche des "Home Bildschirm zieren:

Wird kein Icon angegeben, wird ein Thumbnail des Preview der Seite als Icon verwendet. Will man das Icon selbst erstellen, generiert man ein PNG in der von Apple empfohlenen Größe 57x57 Pixel. Die abgerundeten Ecken und der Glossy-Effekt wird vom iPhone automatisch hinzugefügt.

Das komplette HTML-Grundgerüst der Webseite sieht nun wie folgt aus:

<!DOCTYPE HTML>
<html manifest="manifest.php">
<head>
<title>JS DB Test - Offline</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="naxos-icon.png" />
<script type="text/javascript">
...
function cacheUpdater() {
var webappCache = window.applicationCache;
console.log("Cache status: " + webappCache.status);
if (webappCache.status == 4) {
webappCache.update();
console.log("Updating the cache");
webappCache.swapCache();
} else {
console.log("Nothing to do...");
}
}
...
</script>
</head>
<body style="font-family: Helvetica, Verdana, Arial;">
...
</body>
</html>

Die komplette Seite für den vollständigen Quellcode steht unter http://www.naxos-software.de/blog/media/html5/database_local.html zur Verfügung. Mit dem iPhone ruft man diese URL auf und führt folgende Schritte aus:


+-Zeichen am unteren Bildschirmrand drücken	"Zum Home-Bildschirm" drücken	"Hinzufügen" drücken

Neues Icon auf dem "Home Bildschirm"	iPhone in den Flugzeugmodus setzen und Aufruf der Applikation über das Icon

Nutzen?

Für das iPhone bedeutet die Möglichkeit den Offline Cache nutzen zu können, die Möglichkeit, Webapplikationen zu entwickeln, die sich wie eine native Anwendung "anfühlen" und mit Hilfe diverser UI-Kits wie UiUI auch entsprechend zu bedienen sind.

Sieht man es allgemein, so bieten sich für den Entwickler Möglichkeiten, die im Bereich der Webentwicklung revolutionär sind. Unter der Annahme, ein Browser unterstützt zusätzlich noch die Möglichkeit der clientseitigen Datenspeicherung, wäre z.B. folgendes Szenario denkbar: 1. Anwender erfasst Daten und will Sie zur Persistierung an den Server schicken. 2. Anwendung befindet sich im Offline-Modus, Daten werden clientseitig zwischengespeichert. 3. Befindet sich die Anwendung wieder im Online-Modus, Übertragung an den Server. Es stellt sich jetzt bloß die Frage, wie man clientseitig zwischen On- und Offline-Modus unterscheiden könnte? In HTML 5 wurde dem Navigator Objekt ein onLine-Attribut spendiert und die Abfrage von navigator.onLine sollte das entsprechende Ergebnis liefern.