Open Source im professionellen Einsatz
Linux-Magazin 10/2012
774

Indexed DB

Listing 5 zeigt Indexed DB im Einsatz: Zeile 2 referenziert das Datenbankobjekt unter Berücksichtigung der Hersteller-Präfixe mehrerer Browser. In Zeile 7 öffnet der Javascript-Code die Datenbank und startet in Zeile 13 eine Transaktion. Der erste Parameter der Methode Transaction übergibt eine Liste zu bearbeitender Object Stores. Der zweite markiert mit 0 lesende und mit 1 schreibende Transaktionen, Firefox verwendet ab Version 13 standardgetreu »readonly« und »readwrite« . Erst die folgende Methode »objectStore()« gewährt Zugriff auf die Daten im Object Store »pos« .

Listing 5

Wrapper-Objekt für Indexed DB

01 window.IndexedDB = {
02  indexedDB : window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB,
03
04  storeParams: {keyPath:'key', autoIncrement:false},
05
06 open : function(cbk, mod) {
07    var orq = this.indexedDB.open('geos');
08    orq.onsuccess = function(e) {
09     if (window.mozIndexedDB) {
10      try {
11       cbk(e.target.result.transaction(['pos'], mod).objectStore('pos'));
12      } catch(l) {
13       cbk(e.target.result.transaction(['pos'], ((mode === 0)?'readonly':'readwrite')).objectStore('pos'));
14      }
15     } else {
16      cbk(e.target.result.transaction(['pos'], mod).objectStore('pos'));
17     }
18 }},
19
20  reinstall : function() {
21   this.indexedDB.deleteDatabase('geos');
22   var orq = this.indexedDB.open('geos');
23   orq.onupgradeneeded = function(e) {
24    e.target.result.createObjectStore('pos', IndexedDB.storeParams);
25   };
26   orq.onsuccess = function(e) {
27    if (e.target.result.setVersion) { //chromium
28     var crq = e.target.result.setVersion(2);
29     crq.onsuccess = function(e) {
30      e.target.source.createObjectStore('pos', IndexedDB.storeParams);
31   }}};
32  },
33
34  read : function(key, cbk) {
35   this.open(function(obst) {
36    obst.get(key).onsuccess = function(e) {cbk(e.target.result);}
37  }, 0);
38 },
39
40  save : function(obj) {
41   this.open(function(obst) {obst.put(obj);}, 1);
42  }
43 };

In Zeile 36 nutzt »read« die Methode »get()« , um das Objekt mit dem Schlüssel »key« asynchron zu lesen. Der Success-Callback ruft die benutzerdefinierte Callbackfunktion »cbk()« für das Ergebnis der Lese-Operation auf. Save in Zeile 40 wendet die Methode »put()« zum Speichern eines Objekts an. Den Schlüssel extrahiert Indexed DB aus der Angabe »keyPath: 'key'« in Zeile 4. Diese Vereinbarung erklärt Indexed DB den Pfad zu dem Schlüssel in einem Objekt.

Die Eigenschaft übergibt der Code (Zeilen 24 und 30) beim Erstellen des Object Store »pos« der Methode »createObjectStore()« . Nach dem Löschen der Datenbank »pos« in Zeile 21 überlässt der Code das Neuanlegen dem Event »onupgradeneeded« . Dies tritt auch beim erstmaligen Öffnen einer Datenbank ein. Für den Browser Chrome kommt im Success-Callback der öffnenden Anfrage die Methode »setVersion()« zum Zuge. Dazu gibt Zeile 28 eine höhere Versionsnummer an.

Einheitliches API

Die drei Wrapper-Objekte aus den Listings 3 bis 5 bieten ein einheitliches API zum Speichern von Objekten. Die Auswahl der am besten geeigneten Schnittstelle übernimmt die Methode Autoconnect aus dem Objekt »DataConnector« in Listing 6. Ist keine Speichermethode geeignet, erzeugt »throw« einen Fehler.

Listing 6

Initialisieren des Offlinespeichers

01 window.DataConnector = {
02  autoConnect : function() {
03   if (IndexedDB.indexedDB) {
04    return IndexedDB;
05   } else if (window.openDatabase) {
06    return WebSQL;
07   } else if (window.localStorage) {
08    return LocalStorage;
09   }
10   throw new Error({'message': 'no storage class available!'});
11  }
12 };

Mit dem Application Cache und den beschriebenen Speichermöglichkeiten für die Anwendungsdaten lassen sich offline-fähige Apps entwickeln. Abbildung 6 zeigt die Beispielanwendung, deren Programmierung der Rest dieses Beitrag erläutert. Mit einem Klick auf »Neuer Eintrag« kann der Anwender einen neuen Positionspunkt in die Karte eintragen. Der aktuelle Standort ist voreingestellt. Nach dem Speichern überträgt die App die Position zunächst in einen der drei lokalen Datenspeicher und fügt dann eine rote Markierung in die Karte ein. Zudem landet die Position in einer Liste unterhalb der Kartenansicht.

Abbildung 6: Die offline-fähige Beispielanwendung speichert die geografischen Koordinaten von Orten und zeigt deren Position in einer Karte.

Wie ein Neustart des Browsers zeigt, bleiben die gespeicherten Daten erhalten. Dabei startet die Anwendung selbst dann, wenn die Netzwerkverbindung getrennt ist. Wer sich dafür interessiert, was unter der Haube vorgeht, sollte die jeweils neuesten Versionen der Webbrowser Firefox, Opera oder Chrome zum Testen verwenden. Chrome unterstützt alle hier beschriebenen Technologien. Zudem bietet Googles Webbrowser die übersichtlichste Konsole zum Inspizieren der Webanwendung. Sie lässt sich mit dem Tastenkürzel [Strg]+[Shift]+[I] öffnen.

Den aktuelle Standort eines mobilen Geräts kann der Webbrowser mit dem Geolocation-API [7] ausfindig machen. Firefox [8] und Chrome ermitteln die Position durch eine Anfrage bei Google, die die Kennung benachbarter Wifi-Netzwerke und die IP-Adresse auswertet. Das Geolocation-API verpackt die Standortdaten in ein Objekt. Es enthält Längen- (»latitude« ) und Breitengrad (»longitude« ) sowie deren Abweichung (»accuracy« ) in Grad, die Höhe über dem Meeresspiegel (»altitude« ) sowie deren Abweichung (»altitudeAccuracy« ) in Metern, die aktuelle Geschwindigkeit entlang der Erdoberfläche (»velocity« ) in Meter pro Sekunde und die Richtung der Bewegung (»heading« ) in Grad – bezogen auf 0° Nord und im Uhrzeigersinn wachsend.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Firefox OS

    Javascript, HTML 5 und jede Menge Linux- und Android-Erbschaften: Das ist Firefox OS, das Smartphone-Betriebssystem, mit dem Mozilla auf den Markt der günstigen Smartphones drängt. Das Linux-Magazin hat die ersten beiden Referenz-Entwicklergeräte Keon und Peak von Geeksphone getestet.

  • Gut sortiert

    Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

  • Firefox-OS-Apps

    Erst Apps bringen die Smartness aufs Smartphone, da macht Firefox OS keine Ausnahme. Im Unterschied zur Konkurrenz bauen die Entwickler ihre Apps jedoch mit offenen Webtechnologien wie HTML 5, Javascript und CSS 3. Der Artikel zeigt das exemplarisch anhand einer App zum Stimmen von Gitarren.

  • Backbone.js

    Die Javascript-Engines moderner Browser sind leistungsfähig genug, um die Anwendungslogik zu übernehmen. Wie auf dem Server beschleunigen auch hier Frameworks die Entwicklung. Ein herausragendes Beispiel für diese Gattung ist Backbone.js, das ein lokales Datenmodell umsetzt.

comments powered by Disqus

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.