使用 HTML5 FileSystem API 让整个网页离线

Eric Bidelman

必须承认,AppCache 非常烦人,并且存在一些问题 [123]。一大限制是无法按需动态缓存资源。从本质上讲,这让离线应用成为一件大事或无事。系统会预先缓存清单中的所有内容,或者没有缓存任何内容。

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.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: 网址。一点都不酷!现在,修复此 bug 后,我可以保留文件 (<img src="img/test.png">) 的相对路径,因为它们将正确解析为文件系统源。

借助此功能,您可以轻松下拉网页并离线保存其中的所有资源,同时又能保留与在线版本完全相同的文件夹结构。