Frage bzg. Prinzip für HTML5 (offline) WebApp
Hallo,
ich wollte mich mal so langsam in die AppEntwicklung unter HTML5 einarbeiten... Allerdings habe ich von Anfang an noch ein paar Fragen - die Recherchen im Internet haben mich noch nicht wirklich weiter gebracht. Ich habe eine Webseite und somit auch eine mySQL Datenbank. Jetzt möchte ich für diese "kleine" Webseite mal eine App zu Übungszwecken aufsetzen. Ich habe mir ein Design mit dem Photoshop entwurfen, mir die Multipage Demo von jQuery mobile runtergeladen und alle "Unterseiten" für die App angelegt. Bis hierhin: Kein Problem. Wenn es dann jetzt bald um die dynamischen Inhalte geht.. zum Beispiel soll die App im Hauptmenü den Punkt "News" besitzen. Die News an sich liegen jetzt aber in meiner "normalen" SQL Datenbank (Benutze ein CMS). Ich muss doch diese Daten nun irgendwie in meinen "localStorage" bekommen, denn nur so ist die App ja offline mit Daten versorgt. Oder verstehe ich das falsch? Demnach würde es doch auch Sinn machen, zu prüfen, ob eine Internetverbindung besteht, um so Aktualisierungen durchzuführen..praktisch das bestehende gechachte vom letzten Mal überschreiben... Wenn kein Internet zur Verfügung steht, dann werden die zuletzt gecachten Daten genommen, ansonsten wird ein Update gemacht. Oder wie läuft sowas? Ich glaube es liegt ein Verständisfehler von meiner Seite vor, oder? Des weiteren wollte ich die FacebookApi nutzen, um z.B. Bilder einzubinden. FB kann ich ja nur anzapfen, wenn der Client (also das Smartphone) online ist. Diese müsste ich ja dann auch im Browsereigenen Cache bzw. SQL DB ablegen..? Kann mir jemand nochmal das Prinzip genauer Erläutern, sodass ich loslegen kann? Danke im Voraus!! :) |
Du kannst über JavaScript prüfen, ob dein Client gerade Internetzugriff hat.
HTML-Code:
navigator.onLine Du musst in deiner App also prüfen ob du online bist. Falls ja holst du die Daten aus dem Internet und legst sie beim Client ab (localStorage). Ist er offline schaust du in deinem Cache nach ob etwas da ist. Falls der leer ist, kannst du dann eine Meldung ausgeben, dass Internetzugriff benötigt wird. Ansonsten gibst du den Inhalt einfach aus und der User kriegt gar nichts davon mit. Ich würde mir aber überlegen ob der Aufwand Sinn macht, oder ob man für gewisse Funktionen einfach eine Internetverbindung voraussetzt. Offline-Apps machen ja nur Sinn, wenn man sie auch sinnvoll offline einsetzen kann. Gruß, Max |
Hey Maxefix,
erstmal Danek für Dein Feedback. So hatte ich mir das auch schon gedacht.. Nun muss ich aber für meine SQL Abfragen (um später den localStorage zu füttern) .php Dateien ausführen. Diese müssen natürlich online auf meinem Server liegen, da diese sicherlich sonst nicht ausgeführt werden können. Rufe ich diese beim Aufruf der App im Hintergrund per AJAX auf..oder wie? Dann müsste ich bei Erfolg das Ergbnis (am besten per JSON) in eine Schleife übergeben, die es dann nach und nach per Key->Value in den localstorage schreibt? Kann ich auch statt Key->Value das ganze etwas mehr verschachteln, z.B. localstorage['test'][KEY1] = value; localstorage['test'][KEY2] = value; localstorage['bla'][KEY1] = value; ? :) |
"localStorage" ist ein einfacher Key-Value-Store. Was du da aber abspeicherst ist erstmal egal (ok, nicht ganz, gibt bestimmt eine Größenbeschränkung). Du kannst da also auch einen JSON-String abspeichern.
Code:
localStorage.myKey = JSON.stringify({headline: 'Hallo Welt!'}); Gruß, Max |
Kann ich da auch Bilder drin speichern? Also nur die Source bzw. Pfad zum Bild bringt mir ja nichts im offline Modus =)
|
Nein, aber reguläre Dateien (egal ob Bilder, HTML oder JavaScript) kann der Browser ja in seinem Cache ablegen. Google mal nach "Cache Manifest".
Gruß, Max |
Hey,
das mit dem MANIFEST hatte ich bereits schon gelesen...aber ich habe das schnell wieder vergessen, da das doch nicht für alle Browser geeignet ist..?! Ich möchte per Facebook API ein paar bilder bzw. ganze alben auslesen.. die kann ich auch mit manifest nicht cachen :) D.h. ich müsste die internetverbindung prüfen und nur dann können die Bilder in der WebApp angezeigt werden..?! |
localStorage ist bei älteren Browsern auch nicht verfügbar. Aber so wie ich das verstanden habe, willst du ja eh eine Art App für Smartphones schreiben. Und da ist die Unterstützung ziemlich gut:
Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices Gruß, Max |
Alle Zeitangaben in WEZ +2. Es ist jetzt 15:48 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023