Wir erstellen Webanwendungen für das iPhone, die offline arbeiten. Aber wir haben Schwierigkeiten, dynamische Bilder zwischenzuspeichern. Bitte lesen Sie weiter und ich werde anhand von Beispielen genau zeigen, was ich meine und was wir bisher gemacht haben.
Nehmen wir zum Beispiel an, wir erstellen eine einfache Listenanwendung mit nur einer Seite. Der einzige Zweck der Anwendung besteht darin, 5 Elemente aufzulisten, wobei jedes Element Text und 1 Bild enthält.
Die Anwendung hat ein einfaches Logo und einen separaten JavaScript- und CSS-Code. Diese statischen Ressourcen werden mit der Cache-Manifestdatei zwischengespeichert.
Es gibt 2 Szenarien:
Szenario 1: Ich bin online und öffne die Webanwendung
Wenn ich die Listenanwendung in Safari lade, werden 5 neue zufällige Elemente aus einer Datenbank mit 1000 Elementen geladen. Diese werden alle von einem einfachen Backend über einen AJAX-Aufruf (JSON-Format) bedient.
Das gesamte JSON-Objekt mit den 5 Elementen wird sofort im lokalen HTML5-Speicher gespeichert und für die Offline-Verwendung zwischengespeichert.
Die Struktur des JSON-Objekts ist ungefähr so:
%Vor%Wie Sie sehen, sehr einfach (möglicherweise sind einige Fehler in diesem JSON), wird das gesamte JSON-Objekt im lokalen Speicher gespeichert.
Jetzt werden die 5 Elemente mit JavaScript-injiziertem HTML gerendert (mit CSS formatiert), nichts Schickes. Span-Tags mit den Text- und Bild-Tags, die auf die Bildressource verweisen, werden erstellt usw.
Im Online-Modus funktioniert alles super.
Szenario 2: Ich bin OFFLINE und ich öffne die Webanwendung
Die Seite wird geladen (das Logo wird angezeigt, weil es als statische Ressource mit dem Cache-Manifest zwischengespeichert wurde). Einige JavaScript-Programme erkennen, dass wir tatsächlich offline sind und die Anwendung daher nicht versucht, das Back-End zu kontaktieren. Stattdessen liest es das zuvor gespeicherte JSON-Objekt aus dem lokalen Speicher und beginnt mit dem Rendern der 5 Elemente. Alles wie erwartet.
Text wird gut angezeigt, aber dieses Mal werden die Bilder nicht angezeigt. Der Grund dafür ist einfach. Die Bild-Tags verweisen auf Bildressourcen, die nicht verfügbar sind. So zeigt es das kleine Bild nicht verfügbar Symbol.
Nun meine Frage ist, gibt es eine Möglichkeit, diese Bildressourcen irgendwie zwischenzuspeichern? Damit sie das nächste Mal gebraucht werden, werden sie aus dem Cache geholt.
Das habe ich ausprobiert:
Ich habe buchstäblich Stunden damit verbracht und kann keine Lösung finden ... hat jemand eine Ahnung? Ich weiß, dass dies möglich ist, denn wenn Sie sich die Google Mail HTML5-Anwendung für das iPhone ansehen, können sie die Anhänge irgendwie zwischenspeichern und Sie können sie sogar offline abrufen.
Die einzige Sache, die wir noch nicht ausprobiert haben, ist die Verwendung der SQLite-Datenbanken, die von Safari unterstützt werden. Vielleicht könnte ich die Bilder als BLOB speichern (immer noch aus dem Feed holen und damit langsam?) und dann irgendwie magisch das in ein Bild auf dem Bildschirm umwandeln .... aber ich habe keine Ahnung wie ich das machen soll.
Jede Hilfe ist willkommen, danke.
Ich würde Ihnen raten, einen Blick darauf zu werfen, ob Sie Canvases für Ihre Bilder verwenden können, da sie bestimmte Eigenschaften haben, um Bildpixeldaten zu erhalten / einzufügen, wie zB eine CSV von Pixelwerten (0-255) / p>
Quelle: Ссылка
ich bin nicht sicher, ob Sie Bildquellen dynamisch in einem Canvas verwenden können, aber wenn Sie können, sollten Sie in der Lage sein, die CSVV-Daten aus dem Bild in eine DB zu übertragen und umgekehrt.
Hoffe, dass Sie irgendwo hinführt.
Zitat
Safari 4.0 und höher unterstützen die direkte Bearbeitung der Pixel einer Arbeitsfläche. Sie können die Rohpixeldaten einer Zeichenfläche mit der Funktion getImageData () abrufen und mit der Funktion createImageData () einen neuen Puffer für manipulierte Pixel erstellen.
Aktualisierung:
Ich habe diese Links gefunden, an denen Sie auch interessiert sein könnten.
Ссылка // Beachten Sie auch die Idee mit der Canvas-Serialisierung:)
Hier ist ein Code, der ein Bild von AJAX herunterlädt und es in eine Base64-Zeichenfolge konvertiert. Mit dieser Zeichenfolge können Sie sie in localStorage speichern und sie der src-Eigenschaft eines img im Offline-Modus zuweisen.
%Vor%Sie können es hier testen: Ссылка
Mit dieser Technik können Sie einen localStorage Cache schreiben.
Die _arrayBufferToBase64 wird von hier extrahiert: ArrayBuffer zu base64 codierte Zeichenfolge