Seien wir ehrlich, AppCache ist lästig und hat Probleme [1, 2, 3]. Ein großer Nachteil ist die Tatsache, dass Assets nicht bei Bedarf dynamisch im Cache gespeichert werden können. Wenn es darum geht, eine App offline zu nehmen, ist dies im Grunde alles oder nichts. Entweder wird alles im Manifest im Voraus oder nichts im Cache gespeichert.
Die HTML5 FileSystem API wird zu einer attraktiven Lösung für die Mängel von AppCache. Dateien und Ordnerhierarchien lassen sich programmatisch im lokalen Dateisystem (in einer Sandbox ausgeführt) speichern und anschließend bei Bedarf einzelne Ressourcen hinzufügen, aktualisieren oder entfernen. Mein Kollege Boris Smus hat sogar eine nützliche Bibliothek geschrieben, um diese Art von Offline-Caching im Kontext von Spielen zu verwalten. Derselbe Prinzip lässt sich extrapolieren, sodass er mit jeder Art von Web-App funktioniert.
crbug.com/89271 ist eine wichtige Korrektur für die FileSystem API, durch die relative filesystem: URL-Pfade wie ein Charm funktionieren.
Ich habe die Datei „index.html“ im Stammordner des Dateisystems (fs.root) gespeichert, einen „img“-Ordner erstellt und die Datei „test.png“ darin gespeichert. Die filesystem:-URL für diese beiden Dateien wäre filesystem:http://example.com/temporary/index.html bzw. filesystem:http://example.com/temporary/img/test.png. Wenn ich dann „test.png“ für eine img.src verwenden möchte, musste ich den vollständigen absoluten Pfad verwenden: <img src="filesystem:http://example.com/temporary/img/test.png">. Das bedeutete, dass alle relativen URLs in „index.html“ umgeschrieben wurden, sodass sie auf die filesystem:-URL der entsprechenden Datei verweist. Nicht cool! Mit dieser Fehlerkorrektur kann ich den relativen Pfad zur Datei (<img src="img/test.png">) beibehalten, da sie korrekt in den Ursprung des Dateisystems aufgelöst werden.
Mit dieser Funktion ist es einfach, eine Seite herunterzuladen und alle ihre Ressourcen offline zu speichern, während die Ordnerstruktur der Online-Version unverändert bleibt.