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

Eric Bidelman 氏

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

AppCache の欠点に対処するには、HTML5 FileSystem API が魅力的なソリューションになります。ローカル(サンドボックス化された)ファイル システムにファイルとフォルダの階層をプログラムで保存してから、必要に応じて個々のリソースを追加、更新、削除できます。私の同僚の 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">)の相対パスを保持できるようになりました。これは、ファイルシステムのオリジンに正しく解決されるためです。

この機能により、オンライン バージョンとまったく同じフォルダ構造を保ちながら、ページをプルダウンしてすべてのリソースをオフラインで簡単に保存できます。