AppCache는 성가롭고 문제가 있습니다[1, 2, 3]. 한 가지 큰 제한사항은 애셋을 필요에 따라 동적으로 캐시할 수 없다는 점입니다. 따라서 앱을 오프라인으로 전환할 때는 '전부 아니면 전혀'가 됩니다. 매니페스트의 모든 항목이 미리 캐시되거나 아무것도 캐시되지 않습니다.
HTML5 FileSystem API는 AppCache의 단점을 해결하는 매력적인 솔루션이 됩니다. 로컬 (샌드박스 처리된) 파일 시스템에 파일 및 폴더 계층 구조를 프로그래매틱 방식으로 저장한 후 필요에 따라 개별 리소스를 추가/업데이트/삭제할 수 있습니다. 제 동료인 보리스 스무스도 게임 컨텍스트에서 이러한 유형의 오프라인 캐싱을 관리하는 멋진 라이브러리를 작성했습니다. 동일한 아이디어를 추론하여 모든 유형의 웹 앱에서 작동하도록 할 수 있습니다.
crbug.com/89271은 상대 filesystem: URL 경로가 제대로 작동하도록 하는 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">를 사용해야 했습니다. 즉, index.html의 모든 상대 URL을 재작성하여 해당 파일의 filesystem: URL을 가리키도록 해야 했습니다. 재미 없음 이제 이 버그 수정으로 파일의 상대 경로 (<img src="img/test.png">)를 유지할 수 있습니다. 파일의 상대 경로는 파일 시스템 출처로 올바르게 확인되기 때문입니다.
이 기능을 사용하면 페이지를 가져와서 모든 리소스를 오프라인으로 저장하면서 온라인 버전과 정확히 동일한 폴더 구조를 유지할 수 있습니다.