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

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

เมื่อเว็บแอปอ่านและเขียนไฟล์ได้แล้ว ขั้นตอนต่อไปที่สมเหตุสมผลคืออนุญาตให้นักพัฒนาแอปประกาศเว็บแอปเหล่านี้เป็นตัวแฮนเดิลไฟล์สำหรับไฟล์ที่แอปสามารถสร้างและประมวลผลได้ 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
  • ขอบ: 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 (ดูต่อไปด้านล่าง) จะมีเอลิเมนต์เพียง 1 เอลิเมนต์

ตัวอย่างด้านล่างนี้ซึ่งแสดงเฉพาะข้อความที่ตัดตอนมาที่เกี่ยวข้องของไฟล์ 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 จัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นเห็นว่าการสนับสนุนเบราว์เซอร์นั้นสำคัญเพียงใด

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

ขอขอบคุณ

File Handling API กำหนดโดย Eric Willigers, Jay Harris และ Raymes Khoursy บทความนี้ได้รับการตรวจสอบโดย Joe Medley