坦白說,AppCache 很麻煩,而且發生問題 [1、2、3]。這項限制還有一個一大限制,那就是無法視需求動態快取素材資源。基本上,這使得應用程式在離線狀態下,可說是完全或完全沒有。系統可能是先快取資訊清單中的所有內容,或是沒有任何快取資料。
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.html
和 filesystem: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">
),因為這類路徑可正確解析為檔案系統來源。
這項功能可讓你輕鬆將網頁拉下,離線儲存所有資源,同時保留與線上版本完全相同的資料夾結構。