ช่วงทดลองใช้ File System Observer API จากต้นทาง

Thomas Steiner

ทั้ง File System Access API และ Origin Private File System API ช่วยให้นักพัฒนาแอปเข้าถึงไฟล์และไดเรกทอรีในอุปกรณ์ของผู้ใช้ได้ การตั้งค่าแรกช่วยให้นักพัฒนาซอฟต์แวร์สามารถอ่านและเขียนลงในระบบไฟล์ปกติที่ผู้ใช้มองเห็นได้ จากนั้นระบบจะแสดงไฟล์พิเศษที่ซ่อนไว้จากระบบไฟล์ของผู้ใช้ ซึ่งเป็นข้อมูลส่วนตัวของต้นทางของแต่ละเว็บไซต์ และยังมีข้อดีด้านประสิทธิภาพบางประการ วิธีที่นักพัฒนาแอปโต้ตอบกับไฟล์และไดเรกทอรีในทั้ง 2 กรณีคือการใช้ออบเจ็กต์ FileSystemHandle อย่างที่เป็นรูปธรรมมากขึ้น ใช้ FileSystemFileHandle สำหรับไฟล์ และ FileSystemDirectoryHandle สำหรับไดเรกทอรี ก่อนหน้านี้ การได้รับแจ้งเกี่ยวกับการเปลี่ยนแปลงในไฟล์หรือไดเรกทอรีในระบบไฟล์ใดระบบหนึ่งจำเป็นต้องมีแบบสำรวจและเปรียบเทียบการประทับเวลา lastModified หรือแม้แต่เนื้อหาของไฟล์เอง

File System Observer API ในช่วงทดลองใช้จาก Chrome 129 จะทำการเปลี่ยนแปลงดังกล่าว และช่วยให้นักพัฒนาแอปได้รับการแจ้งเตือนโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลง คู่มือนี้จะอธิบายวิธีการทำงานและวิธีลองใช้ฟีเจอร์ดังกล่าว

กรณีการใช้งาน

ใช้ File System Observer API ในแอปที่ต้องได้รับแจ้งถึงการเปลี่ยนแปลงระบบไฟล์ที่อาจเกิดขึ้นทันทีที่เกิดขึ้น

  • สภาพแวดล้อมการพัฒนาซอฟต์แวร์แบบผสานรวมบนเว็บ (IDE) ที่แสดงการนำเสนอแผนผังระบบไฟล์ของโปรเจ็กต์
  • แอปที่ซิงค์การเปลี่ยนแปลงระบบไฟล์กับเซิร์ฟเวอร์ เช่น ไฟล์ฐานข้อมูล SQLite
  • แอปที่ต้องแจ้งเตือนเทรดหลักเกี่ยวกับการเปลี่ยนแปลงระบบไฟล์จากผู้ปฏิบัติงานหรือแท็บอื่น
  • แอปที่สังเกตไดเรกทอรีของทรัพยากร เช่น เพิ่มประสิทธิภาพรูปภาพโดยอัตโนมัติ

วิธีใช้ File System Observer API

การตรวจหาฟีเจอร์

หากต้องการดูว่า File System Observer API รองรับหรือไม่ ให้เรียกใช้การทดสอบฟีเจอร์ดังตัวอย่างต่อไปนี้

if ('FileSystemObserver' in self) {
  // The File System Observer API is supported.
}

เริ่มต้นโปรแกรมสังเกตระบบไฟล์

เริ่มต้น File System Observer โดยการเรียกใช้ new FileSystemObserver() โดยกำหนดให้มีฟังก์ชัน callback เป็นอาร์กิวเมนต์

const observer = new FileSystemObserver(callback);

เริ่มสังเกตไฟล์หรือไดเรกทอรี

หากต้องการเริ่มสังเกตไฟล์หรือไดเรกทอรี ให้เรียกใช้เมธอด observe() แบบไม่พร้อมกันของอินสแตนซ์ FileSystemObserver ระบุ FileSystemHandle ของไฟล์หรือไดเรกทอรีที่เลือกเป็นอาร์กิวเมนต์ เมื่อสังเกตไดเรกทอรี จะมีอาร์กิวเมนต์ options ที่ไม่บังคับให้คุณเลือกได้ว่าจะรับการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงที่เกิดขึ้นซ้ำๆ สำหรับไดเรกทอรีหรือไม่ (กล่าวคือ สำหรับไดเรกทอรีนั้นและในไดเรกทอรีย่อยและทั้งหมดมีไดเรกทอรีย่อย ตัวเลือกเริ่มต้นคือให้สังเกตไดเรกทอรีและไฟล์ที่อยู่ภายในโดยตรงเท่านั้น

// Observe a file.
await observer.observe(fileHandle);
// Observe a directory.
await observer.observe(directoryHandle);
// Observe a directory recursively.
await observer.observe(directoryHandle, {recursive: true});

ฟังก์ชัน Callback

เมื่อเกิดการเปลี่ยนแปลงในระบบไฟล์ ระบบจะเรียกฟังก์ชัน Callback โดยใช้การเปลี่ยนแปลงระบบไฟล์ records และตัว observer เป็นอาร์กิวเมนต์ เช่น คุณสามารถใช้อาร์กิวเมนต์ observer เพื่อยกเลิกการเชื่อมต่อผู้สังเกตการณ์ (โปรดดูหัวข้อหยุดสังเกตระบบไฟล์) เมื่อลบไฟล์ที่คุณสนใจทั้งหมดแล้ว

const callback = (records, observer) => {
  for (const record of records) {
    console.log('Change detected', record);
  }
};

บันทึกการเปลี่ยนแปลงระบบไฟล์

ระเบียนการเปลี่ยนแปลงระบบไฟล์แต่ละรายการมีโครงสร้างดังต่อไปนี้ ทุกช่องเป็นแบบอ่านอย่างเดียว

  • root (a FileSystemHandle): แฮนเดิลที่ส่งผ่านไปยังฟังก์ชัน FileSystemObserver.observe()
  • changedHandle (a FileSystemHandle): แฮนเดิลที่ได้รับผลกระทบจากการเปลี่ยนแปลงระบบไฟล์
  • relativePathComponents (an Array): เส้นทางของ changedHandle ที่สัมพันธ์กับ root
  • type (a String): ประเภทของการเปลี่ยนแปลง ประเภทที่เป็นไปได้มีดังนี้
    • "appeared": มีการสร้างไฟล์หรือไดเรกทอรีหรือย้ายไปยัง root
    • "disappeared": ไฟล์หรือไดเรกทอรีถูกลบหรือย้ายออกจาก root
    • "modified": มีการแก้ไขไฟล์หรือไดเรกทอรี
    • "moved": ไฟล์หรือไดเรกทอรีย้ายไปอยู่ภายใน root
    • "unknown": บ่งบอกว่าไม่มีกิจกรรมอย่างน้อย 1 รายการ นักพัฒนาแอปควรสำรวจไดเรกทอรีที่รับชมเพื่อตอบกลับเรื่องนี้
    • "errored": การสังเกตการณ์ใช้ไม่ได้อีกต่อไป ในกรณีนี้ คุณอาจต้องหยุดสังเกตระบบไฟล์
  • relativePathMovedFrom (Array ไม่บังคับ): ตำแหน่งเดิมของแฮนเดิลที่ย้าย ใช้ได้เฉพาะเมื่อtypeคือ"moved"

หยุดสังเกตไฟล์หรือไดเรกทอรี

หากต้องการหยุดสังเกต FileSystemHandle ให้เรียกเมธอด unobserve() และส่งแฮนเดิลเป็นอาร์กิวเมนต์

observer.unobserve(fileHandle);

หยุดสังเกตระบบไฟล์

หากต้องการหยุดการสังเกตระบบไฟล์ ให้ยกเลิกการเชื่อมต่ออินสแตนซ์ FileSystemObserver ดังนี้

observer.disconnect();

ลองใช้ API

หากต้องการทดสอบ File System Observer API ในเครื่อง ให้ตั้งค่าสถานะ #file-system-observer ใน about:flags หากต้องการทดสอบ API กับผู้ใช้จริง ให้ลงชื่อสมัครใช้ช่วงทดลองใช้จากต้นทางและทำตามวิธีการในคู่มือช่วงทดลองใช้ Chrome จากต้นทาง ช่วงทดลองใช้จากต้นทางจะเริ่มต้นตั้งแต่ Chrome 129 (11 กันยายน 2024) ถึง Chrome 134 (26 กุมภาพันธ์ 2025)

สาธิต

คุณดูการทำงานของ File System Observer API ได้ในการสาธิตที่ฝัง ลองดูซอร์สโค้ดหรือรีมิกซ์โค้ดเดโมใน Glitch เดโมจะสร้าง ลบ หรือแก้ไขไฟล์แบบสุ่มในไดเรกทอรีที่สังเกตการณ์ และบันทึกกิจกรรมในไฟล์ไว้ที่ส่วนบนของหน้าต่างแอป จากนั้นจะบันทึกการเปลี่ยนแปลงที่เกิดขึ้นในส่วนล่างของหน้าต่างแอป หากคุณอ่านข้อมูลนี้ในเบราว์เซอร์ที่ไม่รองรับ File System Observer API โปรดดูภาพหน้าจอของการสาธิต

ความคิดเห็น

หากมีความคิดเห็นเกี่ยวกับรูปร่างของ File System Observer API โปรดแสดงความคิดเห็นในปัญหา #123 ในที่เก็บ WHATWG/fs

กิตติกรรมประกาศ

เอกสารฉบับนี้ได้รับการตรวจสอบโดย Daseul Lee, Nathan Memmott, Etienne Noël และ Rachel Andrew