ยอมรับเถอะว่า AppCache น่ารำคาญและมีปัญหา [1, 2, 3] ข้อจำกัดที่สำคัญอย่างหนึ่งคือ การแคชเนื้อหาแบบไดนามิกตามคำขอไม่ได้ และหลักๆ ก็คือทำให้แอปออฟไลน์ไปเลยหรือไม่ต้องดำเนินการใดๆ เลย ทุกอย่างในไฟล์ Manifest จะได้รับการแคชไว้ตั้งแต่ต้น หรือไม่มีการแคชเลย
FileSystem API ของ HTML5 กลายเป็นโซลูชันที่น่าสนใจสำหรับข้อบกพร่องของ AppCache ผู้ใช้สามารถจัดเก็บไฟล์และลำดับชั้นโฟลเดอร์ไว้ในระบบไฟล์ในเครื่อง (แซนด์บ็อกซ์) โดยอัตโนมัติ แล้วเพิ่ม/อัปเดต/นำทรัพยากรออกได้ตามต้องการ เพื่อนร่วมงานของฉันชื่อ Boris Smus ได้เขียนคลังที่ดูดีไว้ใช้จัดการการแคชแบบออฟไลน์ประเภทนี้ในบริบทของเกมด้วย แนวคิดเดียวกันนี้สามารถนำมาปรับใช้กับเว็บแอปได้ทุกประเภท
crbug.com/89271 เป็นการแก้ไขที่สำคัญสำหรับ FileSystem API ซึ่งทำให้เส้นทาง filesystem: URL แบบสัมพัทธ์ทำงานเหมือนอักขระ
สมมติว่าเราบันทึก index.html ไว้ในโฟลเดอร์รากของระบบไฟล์ (fs.root) สร้างโฟลเดอร์ img และบันทึก "test.png" ไว้ในนั้น URL filesystem: สำหรับ 2 ไฟล์จะเป็น filesystem:http://example.com/temporary/index.html และ filesystem:http://example.com/temporary/img/test.png ตามลำดับ จากนั้น หากต้องการใช้ "test.png" สำหรับ img.src ฉันต้องใช้เส้นทางสัมบูรณ์ของ <img src="filesystem:http://example.com/temporary/img/test.png"> ซึ่งหมายความว่าคุณจะต้องเขียน URL สัมพัทธ์ทั้งหมดใน index.html ให้ชี้ไปยัง URL filesystem: ของไฟล์ที่เกี่ยวข้อง ไม่เจ๋งเลยว่ะ ตอนนี้ด้วยการแก้ไขข้อบกพร่องนี้ ฉันสามารถเก็บเส้นทางที่เกี่ยวข้องไปยังไฟล์ได้ (<img src="img/test.png">) เพราะระบบจะแก้ไขไปยังต้นทางของระบบไฟล์ได้อย่างถูกต้อง
คุณลักษณะนี้ช่วยให้คุณดึงหน้าเว็บลงและบันทึกทรัพยากรทั้งหมดแบบออฟไลน์ได้ไม่ยาก ขณะเดียวกันก็ยังคงโครงสร้างโฟลเดอร์เหมือนกับเวอร์ชันออนไลน์