使用 HTML5 FileSystem API 離線存取整個網頁

Eric Bidelman

AppCache 很不方便,而且有問題 [123]。其中一個重大限制是無法依需求動態快取資產。基本上,在使用者離線使用應用程式時,這種做法不會有任何影響。系統會預先快取資訊清單中的所有內容,或未快取任何內容。

HTML5 FileSystem API 可成為 AppCache 短篇的迷人解決方案。使用者可以透過程式輔助方式,在本機 (沙箱) 檔案系統中儲存檔案和資料夾階層,然後視需要新增/更新/移除個別資源。我的同事 Boris Smus 建立了一個精良的資料庫,在遊戲環境中管理這類離線快取。無論哪種類型的網頁應用程式,都可以用來推斷同一個概念。

crbug.com/89271 是 FileSystem API 的重要修正項目,可讓相對的「filesystem: URL」路徑像字元一樣運作。

舉例來說,我將 index.html 儲存在檔案系統的根資料夾 (fs.root)、建立 img 資料夾,並將「test.png」儲存在其中。這兩個檔案的 filesystem: 網址分別為 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 中的所有相對網址,使其指向對應檔案的 filesystem: 網址。不酷!現在,經過這項錯誤修正後,我可以保留檔案的相對路徑 (<img src="img/test.png">),因為這些路徑能正確解析為檔案系統來源。

這項功能可讓您輕易下拉網頁,並離線儲存所有資源,同時保有與線上版本完全相同的資料夾結構。