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

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

Thomas Steiner

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

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

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

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

วิธีใช้ File Handling API

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

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

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 ก่อน จากนั้น เมื่อคุณสร้างไฟล์ด้วยไฟล์ และจัดเก็บไว้ในตำแหน่งใดตำแหน่งหนึ่ง ระบบไฟล์ของคุณ คุณสามารถเปิดไฟล์ด้วยการดับเบิลคลิก หรือคลิกขวาแล้วเลือก "เอ็กซ์คาลิวาด" ในเมนูตามบริบท คุณสามารถดูการใช้งานได้ในซอร์สโค้ด โค้ด

วันที่

ความปลอดภัย

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

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

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

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

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

การยืนยันตัวตนเกี่ยวกับไฟล์

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

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

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

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

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

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

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

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

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

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