การแก้ไขข้อบกพร่อง Filesystem API

FileSystem ของ HTML5 เป็น API ที่มีประสิทธิภาพ ความสามารถที่มากขึ้นก็มาพร้อมกับความซับซ้อน ยิ่งซับซ้อนก็ยิ่งทำให้การแก้ไขข้อบกพร่องยุ่งยากมากขึ้น ขออภัยที่ขณะนี้ DevTools ของ Chrome ยังไม่รองรับ Filesystem API ซึ่งทำให้การแก้ไขข้อบกพร่องยากขึ้นกว่าที่ควรจะเป็น คำว่า "ยาก" หมายถึงต้องเขียนโค้ดเพื่อแสดงรายการ/นำไฟล์ในระบบไฟล์ออก

ในระหว่างที่พยายามใช้ Filesystem API เราพบเคล็ดลับ 2-3 ข้อระหว่างทางที่อยากจะแชร์ เคล็ดลับแต่ละข้อมีข้อจำกัดของตัวเอง แต่การใช้เคล็ดลับเหล่านี้ร่วมกันจะช่วยให้คุณบรรลุเป้าหมายได้ 90% 5 อันดับแรกมีดังนี้

  1. ตรวจสอบว่าคุณไม่ได้เรียกใช้จาก file:// ปัญหานี้เป็นสิ่งที่แอบแฝงอยู่ซึ่งผู้คนจำนวนมากโดนกัด Chrome กำหนดข้อจำกัดด้านความปลอดภัยที่สำคัญใน file:// API ไฟล์ขั้นสูงจำนวนมาก (BlobBuilder, FileReader, Filesystem API,...) จะแสดงข้อผิดพลาดหรือทำงานไม่สำเร็จโดยที่คุณไม่รู้ตัวหากคุณเรียกใช้แอปในเครื่องจาก file:// หากไม่มีเว็บเซิร์ฟเวอร์ คุณก็เริ่ม Chrome โดยใช้ Flag --allow-file-access-from-files เพื่อข้ามข้อจำกัดด้านความปลอดภัยนี้ได้ ใช้ Flag นี้เพื่อการทดสอบเท่านั้น

  2. SECURITY_ERR หรือ QUOTA_EXCEEDED_ERR ที่ไม่น่าพึงประสงค์ กรณีนี้มักเกิดขึ้นเมื่อพยายามเขียนข้อมูล แต่คุณอยู่ภายใต้เงื่อนไข #1 หากไม่ใช่กรณีนี้ แสดงว่าคุณอาจไม่มีโควต้า ระบบจะเปิดระบบไฟล์ได้โดยใช้โควต้า 2 ประเภท ได้แก่ TEMPORARY หรือ PERSISTENT หากคุณใช้รูปแบบหลัง ผู้ใช้จะต้องให้สิทธิ์พื้นที่เก็บข้อมูลถาวรแก่แอปของคุณอย่างชัดเจน ดูวิธีดำเนินการได้จากโพสต์นี้

  3. filesystem: URL FTW การเปิด URL filesystem: สำหรับรูท DirectoryEntry ของต้นทางแอปจะมีประโยชน์ นั่นหมายความว่าอย่างไร เช่น หากแอปของคุณอยู่ใน www.example.com ให้เปิด filesystem:http://www.example.com/temporary/ ในแท็บใหม่ Chrome จะแสดงรายการไฟล์/โฟลเดอร์ที่อ่านอย่างเดียวซึ่งจัดเก็บอยู่ในต้นทางของแอป ดูข้อมูลเพิ่มเติมเกี่ยวกับ URL filesystem: ได้ที่ https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls

  4. chrome://settings/cookies เป็นเพื่อนของคุณ หน้านี้ช่วยให้คุณลบข้อมูลที่จัดเก็บไว้สำหรับต้นทางได้ ซึ่งรวมถึงพื้นที่เก็บข้อมูลฐานข้อมูล, AppCache, คุกกี้, localStorage และข้อมูลใน FileSystem API แต่โปรดทราบว่าการดำเนินการนี้จะเป็นแบบ "ทำทั้งหมดหรือไม่ทำเลย" คุณจะนําเฉพาะไฟล์หรือข้อมูลเพียงบางส่วนออกไม่ได้

  5. อย่าลืมเกี่ยวกับข้อผิดพลาดในการเรียกกลับ Filesystem API ทำงานแบบไม่พร้อมกัน (เว้นแต่คุณจะใช้เวอร์ชันซิงค์ใน Workers) ใช้การเรียกกลับข้อผิดพลาดในการเรียก API เสมอ การดำเนินการเหล่านี้เป็นการดำเนินการที่ไม่บังคับ แต่จะช่วยให้คุณประหยัดเวลาและไม่ต้องปวดหัวในภายหลังเมื่อเกิดปัญหา