Przyznajmy sobie, że AppCache jest uciążliwy i ma problemy [1, 2, 3]. Jednym z największych ograniczeń jest to, że nie można dynamicznie umieszczać zasobów w pamięci podręcznej na żądanie. Oznacza to, że w przypadku przeniesienia aplikacji do trybu offline użytkownik ma do wyboru tylko 2 opcje. Albo wszystko w pliku manifestu jest przechowywane w pamięci podręcznej z góry, albo nic nie jest przechowywane w pamięci podręcznej.
W HTML5 interfejs FileSystem API staje się atrakcyjnym rozwiązaniem na niedociągnięcia AppCache. Można programowo przechowywać hierarchie plików i folderów w lokalnym (odizolowanym) systemie plików, a następnie dodawać, aktualizować i usuwać poszczególne zasoby w miarę potrzeby. Mój współpracownik Boris Smus napisał nawet ładną bibliotekę do zarządzania tym typem pamięci podręcznej offline w kontekście gier. Tę samą metodę można zastosować do dowolnego typu aplikacji internetowej.
crbug.com/89271 to ważna poprawka interfejsu FileSystem API, która sprawia, że ścieżki względne filesystem: URL działają bez zarzutu.
Załóżmy, że plik index.html został zapisany w katalogu głównym systemu plików (fs.root), a w folderze img utworzono plik „test.png”. Adres URL filesystem: tych dwóch plików to odpowiednio filesystem:http://example.com/temporary/index.html i filesystem:http://example.com/temporary/img/test.png. Jeśli chciałem użyć pliku „test.png” w przypadku elementu img.src, musiałem użyć jego pełnej ścieżki bezwzględnej: <img src="filesystem:http://example.com/temporary/img/test.png">. Oznacza to, że wszystkie względne adresy URL w pliku index.html trzeba było przepisać, aby wskazywały na odpowiadające im adresy URL filesystem:. Nieładnie! Dzięki tej poprawce mogę zachować ścieżkę względną do pliku (<img src="img/test.png">), ponieważ zostanie ona poprawnie przekształcona do katalogu źródłowego systemu plików.
Dzięki tej funkcji możesz łatwo pobrać stronę i zapisać wszystkie jej zasoby offline, zachowując przy tym dokładnie taką samą strukturę folderów jak w wersji online.