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

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

Thomas Steiner

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

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

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

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

วิธีใช้ File Handling API

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

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

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

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

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

• 102
• 102
• x
• x

แหล่งที่มา

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

หากต้องการตรวจสอบว่าระบบรองรับ 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 รายการแรกจะเปิดขึ้นในไคลเอ็นต์เครื่องเดียว และ 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.
    }
  });
}

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

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

ข้อมูลประชากร

ฉันได้เพิ่มการรองรับการจัดการไฟล์ลงใน Excalidraw ซึ่งเป็นแอปวาดภาพสไตล์การ์ตูนแล้ว คุณต้องติดตั้ง Excalidraw ก่อนจึงจะทดสอบได้ จากนั้นเมื่อคุณสร้างไฟล์ด้วยไฟล์ดังกล่าวและจัดเก็บไว้ในระบบไฟล์ คุณจะเปิดไฟล์ผ่านการดับเบิลคลิกหรือคลิกขวาแล้วเลือก "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
• ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #FileHandling และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร

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

• คำอธิบายแบบสาธารณะ
• การสาธิต File Handling API | แหล่งที่มาของการสาธิต File Handling API
• ข้อบกพร่องในการติดตาม Chromium
• รายการ ChromeStatus.com
• คอมโพเนนต์การกะพริบ: UI>Browser>WebAppInstalls>FileHandling
• ตรวจสอบแท็ก
• ตำแหน่งมาตรฐานของ Mozilla

ข้อความแสดงการยอมรับ

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