Offline first - local storage Demo mit pouchDB
Ich habe mich ein wenig mit "Offline First" & "Local Storage" Apps beschäftigt und eine kleine Demo mit PouchDB gebaut. Es handelt sich hierbei um eine App, mit der man schnell eine Speisekarte bauen kann. Wenn man einmal die Seite besucht hat, wird diese im AppCache gespeichert und, wenn die Verbindung einmal nicht da sein sollte, aus diesem angezeigt.
Eine Seite offline Verfügbar zu machen, ist relativ einfach. Man muss lediglich eine .appcache Datei anlegen und alle Dateien referenzieren, die man offline benötigt. Meine "speisekarte.appcache" Datei sieht folgendermaßen aus:
CACHE MANIFEST
# June 9. 2017
index.html
assets/css/main.css
assets/js/app.js
assets/js/pouchdb-6.2.0.min.js
In der index.html, musste ich dann noch den Pfad zur speisekarte.appchache Datei eintragen. Das geht folgendermaßen:
<html manifest="speisekarte.appcache">
Mehr Infos dazu gibt es hier: https://www.html5rocks.com/en/tutorials/appcache/beginner/
Die Einträge in der Speisekarte werden lokal beim User im Browser gespeichert. Dazu habe ich das praktische PouchDB Script genutzt, was einem die Entwicklung enorm vereinfacht. Mein größtes Problem bei der Entwicklung war daher auch eher die gedankliche Umstellung von relational Datenbanken wie MySQL zu einer Dokumenten Datenbank.
Schau dir meine Offline-First App an: Speisekarte