อนุญาตให้เว็บแอปพลิเคชันที่ติดตั้งไว้เป็นตัวแฮนเดิลไฟล์

ลงทะเบียนแอปเป็นตัวแฮนเดิลไฟล์กับระบบปฏิบัติการ

Thomas Steiner

เมื่อเว็บแอปอ่านและเขียนไฟล์ได้แล้ว ขั้นตอนต่อไปที่สมเหตุสมผลคืออนุญาตให้นักพัฒนาแอปประกาศเว็บแอปเหล่านี้เป็นตัวแฮนเดิลไฟล์สำหรับไฟล์ที่แอปสามารถสร้างและประมวลผลได้ File Handling API ช่วยให้คุณทําสิ่งนี้ได้ หลังจากลงทะเบียนแอปเทมเพลตข้อความเป็นตัวจัดการไฟล์และติดตั้งแล้ว คุณสามารถคลิกขวาที่ไฟล์ .txt ใน macOS แล้วเลือก "ดูข้อมูล" เพื่อสั่งให้ระบบปฏิบัติการเปิดไฟล์ .txt ด้วยแอปนี้เป็นค่าเริ่มต้นเสมอ

กรณีการใช้งานที่แนะนําสําหรับ File Handling API

ตัวอย่างเว็บไซต์ที่อาจใช้ API นี้ ได้แก่

  • แอปพลิเคชันสำนักงาน เช่น เครื่องมือแก้ไขข้อความ แอปสเปรดชีต และผู้สร้างสไลด์โชว์
  • เครื่องมือแก้ไขกราฟิกและเครื่องมือวาดภาพ
  • เครื่องมือแก้ไขระดับในวิดีโอเกม

วิธีใช้ File Handling API

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

File Handling API ไม่สามารถโพลีไฟล์ได้ อย่างไรก็ตาม ฟังก์ชันในการเปิดไฟล์ด้วยเว็บแอป สามารถทำได้โดยใช้ 2 วิธีต่อไปนี้

  • Web Share Target API ช่วยให้นักพัฒนาแอประบุแอปของตนเป็นเป้าหมายการแชร์เพื่อให้เปิดไฟล์จากชีตการแชร์ของระบบปฏิบัติการได้
  • File System Access API สามารถผสานรวมกับการลากและวางไฟล์เพื่อให้นักพัฒนาแอปจัดการไฟล์ที่วางในแอปที่เปิดอยู่แล้วได้

การสนับสนุนเบราว์เซอร์

การรองรับเบราว์เซอร์

  • Chrome: 102
  • Edge: 102
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

การตรวจหาองค์ประกอบ

หากต้องการตรวจสอบว่าระบบรองรับ File Handling API หรือไม่ ให้ใช้

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

ส่วนที่ต้องประกาศของ File Handling API

ขั้นตอนแรกคือ เว็บแอปต้องอธิบายไฟล์ประเภทต่างๆ ที่จัดการได้ในไฟล์ Manifest ของเว็บแอป File Handling API จะขยายไฟล์ Manifest ของเว็บแอปด้วยพร็อพเพอร์ตี้ใหม่ชื่อ "file_handlers" ซึ่งยอมรับอาร์เรย์ของตัวแฮนเดิลไฟล์ แฮนเดิลไฟล์คือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

  • พร็อพเพอร์ตี้ "action" ที่ชี้ไปยัง URL ภายในขอบเขตของแอปเป็นค่า
  • พร็อพเพอร์ตี้ "accept" ที่มีออบเจ็กต์ประเภท MIME เป็นคีย์และรายการนามสกุลไฟล์เป็นค่า
  • พร็อพเพอร์ตี้ "icons" ที่มีอาร์เรย์ของไอคอน ImageResource ระบบปฏิบัติการบางระบบอนุญาตให้การเชื่อมโยงประเภทไฟล์แสดงไอคอนที่ไม่ได้เป็นเพียงไอคอนแอปพลิเคชันที่เกี่ยวข้องเท่านั้น แต่เป็นไอคอนพิเศษที่เกี่ยวข้องกับการใช้ไฟล์ประเภทนั้นกับแอปพลิเคชัน
  • พร็อพเพอร์ตี้ "launch_type" ที่กําหนดว่าควรเปิดไฟล์หลายไฟล์ในไคลเอ็นต์เดียวหรือในหลายไคลเอ็นต์ โดยมีค่าเริ่มต้นเป็น "single-client" หากผู้ใช้เปิดไฟล์หลายไฟล์และมีการกำกับเนื้อหาให้กับตัวแฮนเดิลไฟล์ด้วย "multiple-clients" เป็น "launch_type" ระบบจะเปิดแอปมากกว่า 1 ครั้ง และสำหรับการเปิดแต่ละครั้ง อาร์เรย์ LaunchParams.files (ดูด้านล่าง) จะมีเพียงองค์ประกอบเดียว

ตัวอย่างด้านล่างนี้ซึ่งแสดงเฉพาะข้อความที่ตัดตอนมาที่เกี่ยวข้องของไฟล์ Manifest ของเว็บแอป ทำให้เห็นภาพได้ชัดเจนยิ่งขึ้น

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

ข้อมูลนี้มีไว้สําหรับแอปพลิเคชันสมมติที่จัดการไฟล์ค่าที่คั่นด้วยคอมมา (.csv) ที่ /open-csv, ไฟล์กราฟิกเวกเตอร์ที่ปรับขนาดได้ (.svg) ที่ /open-svg และรูปแบบไฟล์ Grafr สมมติที่มีนามสกุล .grafr, .graf หรือ .graph ที่ /open-graf 2 รายการแรกจะเปิดในไคลเอ็นต์เดียว ส่วนรายการสุดท้ายจะเปิดในหลายไคลเอ็นต์หากมีการจัดการไฟล์หลายรายการ

ในเว็บไซต์นี้

ส่วนสำคัญของ File Handling API

เมื่อแอปประกาศไฟล์ที่จัดการได้ใน URL ภายในขอบเขตตามทฤษฎีแล้ว ในทางปฏิบัติแอปจะต้องดำเนินการกับไฟล์ขาเข้า launchQueue จึงเข้ามามีบทบาทในจุดนี้ หากต้องการเข้าถึงไฟล์ที่เปิดตัว เว็บไซต์ต้องระบุผู้บริโภคสําหรับwindow.launchQueue ออบเจ็กต์ การเปิดตัวจะอยู่ในคิวจนกว่าผู้บริโภคที่ระบุจะจัดการ ซึ่งจะเรียกใช้เพียงครั้งเดียวสำหรับการเปิดตัวแต่ละครั้ง วิธีนี้จะช่วยให้จัดการการเปิดตัวทุกรายการได้ ไม่ว่าจะระบุผู้บริโภคเมื่อใดก็ตาม

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

การรองรับเครื่องมือสำหรับนักพัฒนาเว็บ

ยังไม่มีการรองรับ DevTools ขณะเขียนบทความนี้ แต่เราได้ยื่นคำขอฟีเจอร์เพื่อให้เพิ่มการรองรับแล้ว

สาธิต

เราได้เพิ่มการรองรับการจัดการไฟล์ลงใน Excalidraw ซึ่งเป็นแอปวาดภาพสไตล์การ์ตูน หากต้องการทดสอบ คุณต้องติดตั้ง Excalidraw ก่อน เมื่อสร้างไฟล์ด้วยโปรแกรมดังกล่าวและจัดเก็บไว้ในระบบไฟล์แล้ว คุณจะเปิดไฟล์ได้ด้วยการดับเบิลคลิก หรือคลิกขวาแล้วเลือก "Excalidraw" ในเมนูบริบท คุณดูการใช้งานได้ในซอร์สโค้ด

หน้าต่าง Finder ของ macOS ที่มีไฟล์ Excalidraw
โดยดับเบิลคลิกหรือคลิกขวาที่ไฟล์ใน File Explorer ของระบบปฏิบัติการ
เมนูตามบริบทที่ปรากฏขึ้นเมื่อคลิกขวาที่ไฟล์โดยไฮไลต์รายการเปิดด้วย… Excalidraw
Excalidraw เป็นตัวแฮนเดิลไฟล์เริ่มต้นสำหรับ .excalidraw ไฟล์

ความปลอดภัย

ทีม Chrome ได้ออกแบบและติดตั้งใช้งาน File Handling API โดยใช้หลักการหลักที่ระบุไว้ในการควบคุมการเข้าถึงฟีเจอร์ที่มีประสิทธิภาพของแพลตฟอร์มเว็บ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และลักษณะการใช้งานที่สะดวกสบาย

สิทธิ์ การเก็บรักษาสิทธิ์ และการอัปเดตตัวแฮนเดิลไฟล์

เมื่อ File Handling API เปิดไฟล์ ระบบจะแสดงข้อความแจ้งสิทธิ์เพื่อให้ PWA ดูไฟล์ได้ เพื่อให้ผู้ใช้เชื่อถือและไฟล์ของผู้ใช้ปลอดภัย ข้อความแจ้งสิทธิ์นี้จะแสดงขึ้นทันทีหลังจากที่ผู้ใช้เลือก PWA เพื่อเปิดไฟล์ เพื่อให้สิทธิ์เชื่อมโยงกับการดำเนินการเปิดไฟล์โดยใช้ PWA อย่างใกล้ชิดยิ่งขึ้น ซึ่งทำให้เข้าใจได้ง่ายและมีความเกี่ยวข้องมากขึ้น

สิทธิ์นี้จะแสดงทุกครั้งจนกว่าผู้ใช้จะคลิกอนุญาตหรือบล็อกการจัดการไฟล์สำหรับเว็บไซต์ หรือละเว้นข้อความแจ้ง 3 ครั้ง (หลังจากนั้น Chromium จะจำกัดและบล็อกสิทธิ์นี้) การตั้งค่าที่เลือกจะยังคงอยู่เมื่อ PWA ปิดและเปิดใหม่

เมื่อตรวจพบการอัปเดตไฟล์ Manifest และการเปลี่ยนแปลงในส่วน "file_handlers" ระบบจะรีเซ็ตสิทธิ์

เวกเตอร์การโจมตีประเภทต่างๆ จำนวนมากเปิดขึ้นโดยการอนุญาตให้เว็บไซต์เข้าถึงไฟล์ ข้อมูลเหล่านี้ระบุไว้ในบทความเกี่ยวกับ File System Access API ความสามารถเพิ่มเติมที่เกี่ยวข้องกับความปลอดภัยที่ File Handling API มีเหนือ File System Access API คือความสามารถในการให้สิทธิ์เข้าถึงไฟล์บางไฟล์ผ่าน UI ในตัวของระบบปฏิบัติการ แทนที่จะผ่านเครื่องมือเลือกไฟล์ที่แสดงโดยเว็บแอปพลิเคชัน

แต่ก็มีความเสี่ยงที่ผู้ใช้อาจให้สิทธิ์เข้าถึงไฟล์กับเว็บแอปพลิเคชันโดยไม่ได้ตั้งใจด้วยการเปิดไฟล์นั้น อย่างไรก็ตาม โดยทั่วไปแล้วการเปิดไฟล์จะอนุญาตให้แอปพลิเคชันที่เปิดไฟล์อ่านและ/หรือดัดแปลงไฟล์นั้นได้ ดังนั้น การเลือกอย่างชัดแจ้งของผู้ใช้เพื่อเปิดไฟล์ในแอปพลิเคชันที่ติดตั้ง เช่น ผ่านเมนูบริบท "เปิดด้วย…" จะถือเป็นสัญญาณที่เพียงพอที่แสดงถึงความเชื่อใจในแอปพลิเคชัน

การยืนยันตัวตนของตัวแฮนเดิลเริ่มต้น

แต่จะมีข้อยกเว้นในกรณีที่ไม่มีแอปพลิเคชันในระบบโฮสต์สำหรับประเภทไฟล์หนึ่งๆ ในกรณีนี้ ระบบปฏิบัติการโฮสต์บางระบบอาจโปรโมตตัวแฮนเดิลที่เพิ่งลงทะเบียนใหม่ให้เป็นตัวจัดการเริ่มต้นสำหรับประเภทไฟล์นั้นโดยอัตโนมัติและไม่มีการแทรกแซงจากผู้ใช้ ซึ่งหมายความว่าหากผู้ใช้ดับเบิลคลิกไฟล์ประเภทนั้น ระบบจะเปิดไฟล์ในเว็บแอปที่ลงทะเบียนไว้โดยอัตโนมัติ ในระบบปฏิบัติการโฮสต์ดังกล่าว เมื่อ User Agent พิจารณาว่าไม่มีตัวแฮนเดิลเริ่มต้นสำหรับประเภทไฟล์นั้น ระบบอาจต้องแสดงข้อความแจ้งสิทธิ์อย่างชัดเจนเพื่อหลีกเลี่ยงการส่งเนื้อหาของไฟล์ไปยังเว็บแอปโดยไม่ได้รับความยินยอมจากผู้ใช้โดยไม่ได้ตั้งใจ

การควบคุมของผู้ใช้

ข้อกำหนดระบุว่าเบราว์เซอร์ไม่ควรลงทะเบียนทุกเว็บไซต์ที่จัดการไฟล์ได้เป็นตัวจัดการไฟล์ แต่ควรจำกัดการลงทะเบียนการจัดการไฟล์ไว้หลังการติดตั้งและไม่ควรเกิดขึ้นโดยไม่มีการยืนยันจากผู้ใช้อย่างชัดเจน โดยเฉพาะในกรณีที่เว็บไซต์จะกลายเป็นตัวแฮนเดิลเริ่มต้น เว็บไซต์ต่างๆ ควรพิจารณาสร้างส่วนขยายของตัวเองแทนการลักลอบใช้ส่วนขยายที่มีอยู่ เช่น .json ซึ่งผู้ใช้น่าจะลงทะเบียนตัวแฮนเดิลเริ่มต้นไว้แล้ว

ความโปร่งใส

ระบบปฏิบัติการทั้งหมดอนุญาตให้ผู้ใช้เปลี่ยนการเชื่อมโยงไฟล์ปัจจุบัน ซึ่งอยู่นอกขอบเขตของเบราว์เซอร์

ความคิดเห็น

ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับ File Handling API

บอกเราเกี่ยวกับการออกแบบ API

มีบางอย่างเกี่ยวกับ API ที่ไม่ทำงานตามที่คุณคาดหวังหรือไม่ หรือยังไม่มีวิธีการหรือคุณสมบัติ ที่คุณต้องใช้เพื่อนำไอเดียของคุณไปปฏิบัติ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย

  • แจ้งปัญหาเกี่ยวกับที่เก็บ GitHub ที่เกี่ยวข้อง หรือเพิ่มความคิดเห็นของคุณเกี่ยวกับปัญหาที่มีอยู่

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อมูลจำเพาะหรือไม่

  • รายงานข้อบกพร่องที่ new.crbug.com โปรดระบุรายละเอียดให้มากที่สุดเท่าที่จะเป็นไปได้ วิธีการง่ายๆ ในการจำลองปัญหา และป้อน UI>Browser>WebAppInstalls>FileHandling ในช่องคอมโพเนนต์ Glitch เหมาะอย่างยิ่งสำหรับการแชร์การจำลองข้อบกพร่องได้อย่างรวดเร็วและง่ายดาย

แสดงการสนับสนุน API

คุณกำลังวางแผนที่จะใช้ File Handling API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญกับผู้ให้บริการเบราว์เซอร์รายอื่นๆ เพียงใด

  • แชร์ว่าคุณวางแผนจะใช้ WICG อย่างไรในชุดข้อความ Discourse ของ WICG
  • ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #FileHandling และแจ้งให้เราทราบว่า คุณใช้แฮชแท็กที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

File Handling API ระบุโดย Eric Willigers, Jay Harris และ Raymes Khoury บทความนี้ผ่านการตรวจสอบโดย Joe Medley