ลงทะเบียนแอปเป็นตัวแฮนเดิลไฟล์กับระบบปฏิบัติการ
เมื่อเว็บแอปอ่านและเขียนไฟล์ได้แล้ว ขั้นตอนต่อไปที่สมเหตุสมผลคืออนุญาตให้นักพัฒนาแอปประกาศเว็บแอปเหล่านี้เป็นตัวแฮนเดิลไฟล์สำหรับไฟล์ที่แอปสามารถสร้างและประมวลผลได้ 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 ผสานรวมกับการลากและวางไฟล์ได้ เพื่อให้นักพัฒนาซอฟต์แวร์จัดการไฟล์ที่วางไว้ในแอปที่เปิดอยู่แล้วได้
การสนับสนุนเบราว์เซอร์
การตรวจหาฟีเจอร์
หากต้องการตรวจสอบว่าระบบรองรับ 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" ในเมนูบริบท คุณสามารถดูการติดตั้งใช้งานได้ในซอร์สโค้ด
ความปลอดภัย
ทีม 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
- คอมโพเนนต์ Blink:
UI>Browser>WebAppInstalls>FileHandling
- การตรวจสอบแท็ก
- จุดยืนด้านมาตรฐานของ Mozilla
ขอขอบคุณ
File Handling API กำหนดโดย Eric Willigers, Jay Harris และ Raymes Khoursy บทความนี้ได้รับการตรวจสอบโดย Joe Medley