Web SQL und IndexedDB unter einen Hut bringen

Tutorial: PouchDB in einer Offline First App
Kommentare

PouchDB, das client-seitige Datenbank-API, hilft da weiter, wo ihr mit den beiden gängigen Client-seitigen Datenbanken Web SQL und IndexedDB ins Straucheln geratet. Client-seitige Datenbanken sind nach wie vor ein wunder Punkt bei der Entwicklung von Cross-Browser Offline Applikationen: Die einen Browser unterstützen allein Web SQL (Safari, Opera bis einschl. Version 12), die anderen IndexedDB (Firefox und IE 10+), manche beide (Chrome und Opera 15+).

Das wäre alles nicht weiter tragisch, wenn Web SQL und IndexedDB nicht so völlig unterschiedlich wären – gerade was ihre Modelle der Datenspeicherung betrifft. Beide zu unterstützen ist zwar nicht unmöglich, aber auch nicht gerade trivial. Und da kommt PouchDB ins Spiel.

Das client-seitige Datenbank-API ist in JavaScript geschrieben und dem CouchDB-API nachempfunden – daher kann es sich bei Bedarf sogar mit einer CouchDB-Instanz synchronisieren. Was uns aber in diesem konkreten Fall an PouchDB interessiert, ist die Tatsache, dass es die Unterschiede zwischen Web SQL und IndexedDB zu abstrahieren vermag, und sie in ein Single Interface wrapen kann.

Tiffany Brown hat ein Tutorial zusammengestellt, in dem sie zeigt, wie ihr eine einfache Offline First App mit PouchDB bauen könnt.

Was ihr dazu braucht:

  • eine Kopie des PouchDB-Skript
  • einen Web Browser, der IndexedDB oder WebSQL unterstützt
  • einen Http Server (z.B. Nginx, Lighttpd oder Apache HTTP)

Zuerst wird eine PouchDB-Datenbank erstellt, dazu gibt es einige sachdienliche Hinweise.

Dann solltet ihr euch überlegen, wie eure Applikation aussehen soll (im besten Fall wisst ihr das schon vorher). Im Tutorial dient eine Note-Taking-Applikation als Beispiel, Überlegungen sind also etwa, dass jede Notiz einen Title haben soll, außerdem einen Text, der den Note Body ausmacht. Schön wäre es, wenn man die Notizen tagen könnte, also soll es dafür ein Feld geben, und man sollte die Möglichkeit haben, eine Datei anzuhängen.

Vorteile von PouchDB

Gleich zu Beginn zeigen sich die Vorteile von PouchDB:  Es basiert nicht auf einem relationalen Modell der Datenorganisation, sondern hat ein flexibles Schema, sprich: Jedes Objekt in der Datenbank ist ein eigenständiges Dokument. Wir können also Felder und Properties zu Dokumenten hinzufügen, wie wir sie brauchen.

Statt der SELECT * FROM tablename-Syntax, die man von SQL- bzw. Relationalen Datenbanken kennt, nutzen PouchDB-Queries MapReduce: Man schreibt Funktionen, um Daten zu filtern und zu sortieren.

Dann geht es auch schon direkt los mit dem Hinzufügen und Updaten von Notizen, dem Sichern von Anhängen (was ein wenig komplizierter ist, als Text zu sichern), der Möglichkeit, den gesamten Inhalt oder einzelne Notizen abzurufen und zu suchen und schließlich die Offline-Fähigkeit mit dem Application Cache herzustellen. Dazu müssen HTML, CSS und JavaScript offline im Application Cache gespeichert werden. Der Application Cache ist im Grunde eine planke Text-Datei mit einem Content-type: text/cache-manifest– Header, der dem Browser mitteilt, welche Assets lokal gespeichert werden sollen. Die kurze Einführung in das Cache Manifest sollte euch die nötigen Grundlagen vermitteln. Habt ihr euer Manifest geschrieben, müsst ihr es nur noch eurem HTML-Dokument hinzufügen, und dann sollten sowohl eure Datenbank als auch eure Dateien bereits offline verfügbar sein.

Den vollständigen Code für das hier vorgestellte Beispiel gibt es auf GitHub.

Angemerkt sei: Natürlich hat PouchDB noch viele andere Vorzüge, die in diesem leider Tutorial nicht abgedeckt werden, wie die eingangs erwähnte Synchronisation mit dem CouchDB Server etwa.

Aufmacherbild: Illustration of a pouch on a white background von Shutterstock / Urheberrecht:Matthew Cole

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -