我们必须面对现实,AppCache 很烦人,而且存在问题 [1、2、3]。一个重大限制是,无法按需动态缓存资源。从本质上讲,这意味着在将应用下架时,只能选择全部下架或不下架。清单中的所有内容要么全部缓存,要么全部不缓存。
HTML5 FileSystem API 成为了解决 AppCache 缺点的理想方案。您可以通过编程将文件和文件夹层次结构存储在本地(沙盒化)文件系统中,然后根据需要添加/更新/移除各个资源。我的同事 Boris Smus 甚至编写了一个优秀的库,用于在游戏环境中管理此类离线缓存。同样的思路可以推广到任何类型的 Web 应用。
crbug.com/89271 是对 FileSystem API 的一项重要修复,可让相对 filesystem: 网址 路径正常运行。
假设我已将 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:
网址。这可不是什么好事!现在,通过此 bug 修复,我可以保留文件 (<img src="img/test.png">
) 的相对路径,因为它们会正确解析为文件系统源。
借助此功能,您可以轻松拉取网页并将其所有资源保存到线下,同时保留与在线版本完全相同的文件夹结构。