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

Eric Bidelman

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

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

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

Giả sử tôi đã lưu index.html trong 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 đó. URL filesystem: cho hai tệp đó lần lượt là filesystem:http://example.com/temporary/index.htmlfilesystem:http://example.com/temporary/img/test.png. Sau đó, nếu muốn dùng "test.png" cho img.src, tôi cần sử dụng đường dẫn tuyệt đối đầy đủ của tệp này: <img src="filesystem:http://example.com/temporary/img/test.png">. Tức là bạn phải viết lại tất cả URL tương đối trong index.html để trỏ đến URL filesystem: của tệp tương ứng. Chẳng hay tí nào! Giờ đây, nhờ bản sửa lỗi này, tôi có thể giữ lại đường dẫn tương đối đến tệp (<img src="img/test.png">) vì chúng sẽ phân giải chính xác về một điểm gốc của hệ thống tệp.

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