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

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

Thomas Steiner

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

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

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

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

วิธีใช้ File Handling API

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

File Handling API ไม่สามารถใช้ Polyfill ได้ อย่างไรก็ตาม คุณสามารถเปิดไฟล์ด้วยเว็บแอปได้โดยใช้วิธีการอื่นๆ 2 วิธี ดังนี้

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

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

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

หากต้องการตรวจสอบว่าระบบรองรับ 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 object ระบบจะจัดคิวการเปิดตัวจนกว่าผู้ใช้ที่ระบุจะจัดการ ซึ่งจะเรียกใช้ เพียงครั้งเดียวสำหรับการเปิดตัวแต่ละครั้ง ด้วยวิธีนี้ ระบบจะจัดการการเปิดตัวทุกครั้ง ไม่ว่าผู้บริโภคจะได้รับการระบุเมื่อใดก็ตาม

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" ในเมนูตามบริบท คุณสามารถดูการติดตั้งใช้งานในซอร์สโค้ดได้

ความปลอดภัย

ทีม 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 ในช่องคอมโพเนนต์

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

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

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

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

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

คำขอบคุณ

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