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

正直なところ、AppCache は煩わしく、問題があります [123]。大きな制限の 1 つは、アセットをオンデマンドで動的にキャッシュに保存できないことです。つまり、アプリをオフラインにする場合は、すべてをオフラインにするか、何もオフラインにしないかのいずれかになります。マニフェスト内のすべてが事前にキャッシュに保存されるか、何もキャッシュに保存されないかのどちらかです。

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

crbug.com/89271 は、相対 filesystem: URL パスが正常に機能するように FileSystem API を修正する重要な修正です。

たとえば、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">)を使用する必要があります。そのため、index.html 内のすべての相対 URL を書き換えて、対応するファイルの filesystem: URL を参照するようにしました。クールじゃない!このバグ修正により、ファイルの相対パス(<img src="img/test.png">)を保持できるようになりました。ファイルはファイルシステムのオリジンに正しく解決されるためです。

この機能を使用すると、ページをダウンロードしてすべてのリソースをオフラインに保存し、オンライン バージョンとまったく同じフォルダ構造を維持できます。