사실, 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">를 사용해야 했습니다. 즉, 해당 파일의 filesystem: URL을 가리키도록 index.html의 모든 상대 URL을 재작성했습니다. 멋지지 않아요! 이제 이 버그 수정으로 파일 시스템 출처로 올바르게 확인되므로 파일의 상대 경로 (<img src="img/test.png">)를 유지할 수 있습니다.
이 기능을 사용하면 온라인 버전과 정확히 동일한 폴더 구조를 유지하면서 페이지를 아래로 당겨 모든 리소스를 오프라인으로 쉽게 저장할 수 있습니다.