Seien wir ehrlich, AppCache ist ärgerlich und hat Probleme [1, 2, 3]. Eine große Einschränkung besteht darin, dass es unmöglich ist, Assets bei Bedarf dynamisch im Cache zu speichern. Wenn es darum geht, eine App offline zu nehmen, ist das alles oder nichts. Entweder wird alles im Manifest vorab im Cache gespeichert oder nichts wird zwischengespeichert.
Die HTML5 FileSystem API wird zu einer attraktiven Lösung für die Schwachstellen von AppCache. Sie können Dateien und Ordnerhierarchien programmatisch im lokalen Dateisystem (Sandbox-Datei) speichern und anschließend einzelne Ressourcen nach Bedarf hinzufügen, aktualisieren oder entfernen. Mein Kollege Boris Smus hat sogar eine nette Bibliothek geschrieben, die diese Art von Offline-Caching für Spiele verwaltet. Dieselbe Idee kann auf die Verwendung mit jeder Art von Webanwendung übertragen werden.
crbug.com/89271 ist eine wichtige Fehlerbehebung für die FileSystem API, durch die relative filesystem: URL-Pfade wie ein Charm funktionieren.
Angenommen, ich habe die Datei „index.html“ im Stammordner des Dateisystems (fs.root) gespeichert. Außerdem habe ich einen Ordner „img“ erstellt und darin die Datei „test.png“ 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 wollte, musste ich den vollständigen absoluten Pfad angeben: <img src="filesystem:http://example.com/temporary/img/test.png">. Dazu musste alle relativen URLs in „index.html“ neu geschrieben werden, sodass sie auf die filesystem:-URL der entsprechenden Datei verweisen. Nicht cool! Mit dieser Fehlerkorrektur kann ich den relativen Pfad zur Datei (<img src="img/test.png">) beibehalten, da er korrekt zu einem Dateisystemursprung aufgelöst wird.
Mit dieser Funktion ist es einfach, eine Seite herunterzuladen und alle zugehörigen Ressourcen offline zu speichern, während gleichzeitig die Ordnerstruktur der Online-Version exakt beibehalten wird.