HTML5 FileSystem API を使用してページ全体をオフラインにする

現実を直視すると、AppCache はわずらわしく、問題があります [1, 2, 3]。大きな制限の 1 つは、オンデマンドでアセットを動的にキャッシュに保存できないという事実です。アプリをオフラインに使用する際には、基本的にこれだけで済ませることもできます。マニフェスト内のすべてが事前にキャッシュに保存されるか、何もキャッシュに保存されない。

HTML5 の FileSystem API は、AppCache の欠点に対する魅力的なソリューションとなります。ローカル(サンドボックス化された)ファイル システムにファイルとフォルダ階層をプログラムで保存してから、必要に応じて個々のリソースを追加/更新/削除できます。同僚の Boris Smus も、ゲームのコンテキストでこの種のオフライン キャッシュを管理するための便利なライブラリを作成してくれます。同じ考え方をあらゆるタイプのウェブアプリで応用できます。

crbug.com/89271 は FileSystem API の重要な修正であり、相対パスの filesystem: URL を charm のように機能させることができます。

たとえば、index.html をファイルシステムのルートフォルダ(fs.root)に保存し、img フォルダを作成して、「test.png」をそのフォルダに保存したとします。この 2 つのファイルの filesystem: URL はそれぞれ filesystem:http://example.com/temporary/index.htmlfilesystem: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">)を維持できるようになりました。

オンライン版とまったく同じフォルダ構造を保持しながら、ページを開いてすべてのリソースをオフラインで保存するのが簡単です。