ทำให้หน้าเว็บทั้งหน้าเป็นแบบออฟไลน์โดยใช้ HTML5 FileSystem API

ขออภัย AppCache น่ารำคาญและเกิดปัญหา [1, 2, 3] ข้อจำกัดสำคัญอย่างหนึ่งคือเป็นไปไม่ได้ที่จะแคชชิ้นงานแบบไดนามิกตามคำขอ โดยพื้นฐานแล้ว วิธีนี้ทำให้การใช้แอปแบบออฟไลน์เป็นไปโดยไม่จำเป็น ทุกอย่างในไฟล์ Manifest มีการแคชข้อมูลไว้ด้านหน้า หรือไม่มีการแคชไว้

FileSystem API แบบ HTML5 กลายเป็นโซลูชันที่น่าสนใจสำหรับข้อบกพร่องของ AppCache คุณสามารถใช้โปรแกรมจัดเก็บไฟล์และโฟลเดอร์ในระบบไฟล์ในเครื่อง (แซนด์บ็อกซ์) และเพิ่ม/อัปเดต/นำทรัพยากรแต่ละรายการออกตามความจำเป็น Boris Smus เพื่อนร่วมงานของผมเขียนไลบรารีดีๆ เพื่อจัดการการแคชแบบออฟไลน์ประเภทนี้ในบริบทของเกมด้วย แนวคิดเดียวกันนี้สามารถคาดการณ์ได้เพื่อใช้กับเว็บแอปทุกประเภท

crbug.com/89271 เป็นการแก้ไขที่สำคัญสำหรับ FileSystem API ซึ่งทำให้เส้นทาง filesystem: URL สัมพัทธ์ทำงานเหมือน Charm

ตัวอย่างเช่น ฉันบันทึก 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">) ไว้ได้เนื่องจากระบบจะแก้ไขต้นทางของระบบไฟล์อย่างถูกต้อง

ฟีเจอร์นี้ทำให้การดึงหน้าเว็บลงและบันทึกทรัพยากรทั้งหมดแบบออฟไลน์เป็นเรื่องที่ไม่ซับซ้อน โดยที่ยังรักษาโครงสร้างโฟลเดอร์เดิมไว้ทุกประการกับเวอร์ชันออนไลน์