ลงทะเบียนแอปเป็นตัวแฮนเดิลไฟล์ด้วยระบบปฏิบัติการ
เมื่อเว็บแอปอ่านและเขียนไฟล์ได้แล้ว ขั้นตอนถัดไปที่สมเหตุสมผลคือให้นักพัฒนาซอฟต์แวร์ประกาศว่าเว็บแอปเหล่านี้เป็นตัวแฮนเดิลไฟล์สำหรับแอปที่แอปสร้างและประมวลผลได้ โดย File Handling API จะช่วยให้คุณทำเช่นนี้ได้ หลังจากลงทะเบียนแอปเครื่องมือแก้ไขข้อความเป็นตัวแฮนเดิลไฟล์แล้ว หลังจากติดตั้งแล้ว คุณสามารถคลิกขวาที่ไฟล์ .txt
ใน macOS และเลือก "รับข้อมูล" เพื่อกำหนดระบบปฏิบัติการให้เปิดไฟล์ .txt
ด้วยแอปนี้เป็นค่าเริ่มต้นเสมอ
กรณีการใช้งานที่แนะนำสำหรับ File Handling API
ตัวอย่างเว็บไซต์ที่อาจใช้ API นี้ ได้แก่
- แอปพลิเคชัน Office เช่น เครื่องมือแก้ไขข้อความ แอปสเปรดชีต และเครื่องมือสร้างภาพสไลด์
- โปรแกรมตัดต่อกราฟิกและเครื่องมือวาดภาพ
- เครื่องมือแก้ไขระดับวิดีโอเกม
วิธีใช้ File Handling API
การเพิ่มประสิทธิภาพแบบต่อเนื่อง
ไม่สามารถใช้ File Handling API แต่ละรายการได้ แต่ฟังก์ชันการเปิดไฟล์ด้วยเว็บแอป ทำได้ผ่านอีก 2 วิธีดังนี้
- Web Share Target API ช่วยให้นักพัฒนาซอฟต์แวร์ระบุแอปของตนเป็นเป้าหมายการแชร์ได้ เพื่อให้เปิดไฟล์จากชีตที่แชร์ของระบบปฏิบัติการได้
- 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 รายการแรกจะเปิดขึ้นในไคลเอ็นต์เครื่องเดียว และ 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" ในเมนูตามบริบทได้ คุณสามารถตรวจสอบการใช้งานได้ในซอร์สโค้ด
![หน้าต่างตัวค้นหา macOS ที่มีไฟล์ Excalidraw](https://developer.chrome.com/static/docs/capabilities/web-apis/file-handling/image/the-macos-finder-window-eac9df1131965.png?authuser=6&hl=th)
![เมนูตามบริบทที่ปรากฏขึ้นเมื่อคลิกขวาที่ไฟล์ที่ไฮไลต์รายการ "เปิดด้วย..." Excalidraw](https://developer.chrome.com/static/docs/capabilities/web-apis/file-handling/image/the-context-menu-appears-76d8a48d9d84e.png?authuser=6&hl=th)
.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