하지만 AppCache는 성가시고 문제가 있습니다[1, 2, 3]. 한 가지 큰 한계는 요청 시 애셋을 동적으로 캐시할 수 없다는 점입니다. 기본적으로 이 방식은 앱을 오프라인으로 전환할 때 '전부' 또는 '전혀'가 아닙니다. 매니페스트의 모든 항목이 미리 캐시되거나 아무것도 캐시되지 않습니다.
HTML5 FileSystem API는 AppCache의 단점을 해소하기 위한 매력적인 솔루션입니다. 파일 및 폴더 계층 구조를 프로그래매틱 방식으로 로컬 (샌드박스) 파일 시스템에 저장한 후 필요에 따라 개별 리소스를 추가/업데이트/삭제할 수 있습니다. 제 동료인 Boris Smus는 게임과 관련하여 이러한 유형의 오프라인 캐싱을 관리하기 위해 멋진 라이브러리를 작성하기도 했습니다. 동일한 아이디어를 모든 유형의 웹 앱에 적용할 수 있습니다.
crbug.com/89271은 상대 filesystem: URL 경로가 charm처럼 작동하도록 FileSystem API에 관한 중요한 수정사항입니다.
예를 들어 파일 시스템의 루트 폴더 (fs.root)에 index.html을 저장하고 img 폴더를 만든 후 그 안에 'test.png'를 저장했다고 가정해 보겠습니다. 이 두 파일의 filesystem: URL은 각각 filesystem:http://example.com/temporary/index.html와 filesystem:http://example.com/temporary/img/test.png가 됩니다. 그런 다음 img.src에 'test.png'를 사용하려면 전체 절대 경로 <img src="filesystem:http://example.com/temporary/img/test.png">를 사용해야 합니다. 즉, 상응하는 파일의 filesystem: URL을 가리키도록 index.html의 모든 상대 URL을 다시 작성해야 합니다. 재미 없음 이제 이 버그를 수정하여 파일 시스템 원본으로 올바르게 확인되므로 파일의 상대 경로 (<img src="img/test.png">)를 유지할 수 있습니다.
이 기능을 사용하면 온라인 버전과 정확히 동일한 폴더 구조를 유지하면서도 페이지를 풀다운하여 모든 리소스를 오프라인으로 쉽게 저장할 수 있습니다.