Đưa toàn bộ trang xuống phần ngoại tuyến bằng HTML5 FileSystem API

Hãy đối mặt với vấn đề này, AppCache rất khó chịu và có các sự cố [1, 2, 3]. Một hạn chế lớn là không thể lưu động nội dung vào bộ nhớ đệm theo yêu cầu. Về cơ bản, tính năng này khiến ứng dụng trở nên vô cùng thuận lợi hoặc không có kết nối mạng. Mọi nội dung trong tệp kê khai sẽ được lưu vào bộ nhớ đệm trước hoặc sẽ không có nội dung nào được lưu vào bộ nhớ đệm.

FileSystem API của HTML5 trở thành một giải pháp hấp dẫn cho những thiếu sót của AppCache. Người dùng có thể lập trình lưu trữ tệp và hệ phân cấp thư mục trong hệ thống tệp cục bộ (có trong hộp cát), sau đó thêm/cập nhật/xoá từng tài nguyên riêng lẻ nếu cần. Đồng nghiệp của tôi, Boris Smus, thậm chí đã viết một thư viện rất hay để quản lý kiểu lưu vào bộ nhớ đệm ngoại tuyến này trong bối cảnh trò chơi. Cùng một ý tưởng có thể được ngoại suy để hoạt động với bất kỳ loại ứng dụng web nào.

crbug.com/89271 là một bản sửa lỗi quan trọng cho FileSystem API. Bản sửa lỗi này giúp đường dẫn filesystem: URL tương đối hoạt động như một bùa mê.

Giả sử tôi đã lưuindex.html vào thư mục gốc của hệ thống tệp (fs.root), tạo thư mục img và lưu "test.png" trong thư mục đó. URL filesystem: cho hai tệp đó sẽ là filesystem:http://example.com/temporary/index.htmlfilesystem:http://example.com/temporary/img/test.png. Sau đó, nếu muốn sử dụng "test.png" cho img.src, tôi cần sử dụng đường dẫn tuyệt đối đầy đủ: <img src="filesystem:http://example.com/temporary/img/test.png">. Điều đó có nghĩa là bạn phải viết lại tất cả URL tương đối trongindex.html để trỏ đến URL filesystem: của tệp tương ứng. Không hay lắm! Giờ đây, với bản sửa lỗi này, tôi có thể giữ nguyên đường dẫn tương đối đến tệp (<img src="img/test.png">) vì các tệp này sẽ được phân giải chính xác theo nguồn gốc của hệ thống tệp.

Tính năng này khiến việc kéo xuống một trang và lưu tất cả tài nguyên của trang đó khi không có mạng trở nên đơn giản, trong khi vẫn giữ nguyên cấu trúc thư mục giống như phiên bản trực tuyến.