在操作系统中将应用注册为文件处理程序。
现在,Web 应用已经能够读取和写入文件,接下来要做的就是
让开发者将这些 Web 应用声明为文件处理程序
创建和处理。您可以使用 File Handling API 执行此操作。注册短信后
编辑器应用作为文件处理程序,安装完成后,您可以在 macOS 上右键点击 .txt
文件,
选择“显示简介”然后指示操作系统应始终使用此应用打开 .txt
文件,如下所示:
默认值。
建议的 File Handling API 用例
可以使用此 API 的网站示例包括:
- 办公应用,例如文本编辑器、电子表格应用和幻灯片制作程序。
- 图形编辑器和绘图工具。
- 视频游戏关卡编辑器工具。
如何使用 File Handling API
采用渐进增强的方式
File Handling API 本身无法执行 polyfill 操作。通过网络打开文件的功能 但也可通过另外两种方法实现:
- Web Share Target API 让开发者可以将其应用指定为分享目标 以便用户通过操作系统的共享表单打开文件。
- File System Access API 可与文件拖放功能集成,因此 开发者可以在已打开的应用中处理放置的文件。
浏览器支持
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
功能检测
如需检查 File Handling API 是否受支持,请使用:
if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
// The File Handling API is supported.
}
File Handling API 的声明式部分
首先,Web 应用需要在其 Web 应用清单中以声明方式进行描述
能处理哪些类型的文件File Handling API 通过
名为 "file_handlers"
的属性,该属性接受一系列文件处理程序。文件处理程序是
具有如下属性的对象:
- 一个
"action"
属性,它的值是指向应用范围内的某个网址。 "accept"
属性,其中 MIME 类型的对象作为键,文件扩展名列表作为其 值。- 带有
ImageResource
数组的"icons"
属性 图标。某些操作系统允许文件类型关联在显示图标时,不只是 而非相关应用图标,而是与使用相应文件类型相关的特殊图标 应用 "launch_type"
属性,用于定义是否应在一次中打开多个文件 还是在多个客户端中默认值为"single-client"
。 如果用户 打开多个文件,并且如果文件处理程序已使用"multiple-clients"
进行注释,则为"launch_type"
,系统会多次启动应用,而对于每次启动,LaunchParams.files
数组(详见下文) 将只有一个元素。
下面的示例(仅显示了网络应用清单的相关摘录)应该可以 更清楚明了:
{
"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
,位于 /open-svg
的可缩放矢量图形 (.svg
) 文件,以及编造的 Grafr 文件格式
.grafr
、.graf
或 .graph
中的任意一个作为扩展名 /open-graf
。前两个会打开
在单个客户端中,如果正在处理多个文件,则以最后一个客户端的形式发送。
File Handling API 的必备部分
现在,应用已经声明了理论上它可以处理哪个作用域内网址上的文件,接下来需要
在实践中对传入文件执行必要的操作。这正是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”。您可以在源代码中查看实现, 代码。
<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">安全
Chrome 团队根据确定的核心原则设计和实施了 File Handling API 控制对强大的 Web 平台功能的使用权限(包括用户控制、 透明度和人体工学。
权限、权限保留和文件处理程序更新
为了确保用户信任以及用户的安全在 File Handling API 打开文件时 在 PWA 可以查看文件之前,系统会显示权限提示。系统将显示此权限提示 在用户选择 PWA 打开文件后立即发送,这样该权限就与 使用 PWA 打开文件,使其更易于理解和更相关。
除非用户点击允许或禁止处理文件,否则此权限每次都会显示。 或忽略提示三次(之后 Chromium 将会禁止相应行为并阻止此行为 权限)。所选设置在 PWA 关闭和重新打开后保持不变。
当检测到清单更新和 "file_handlers"
部分中的更改时,
会重置。
与文件相关的挑战
通过允许网站访问文件,可以打开一大类攻击途径。 请参阅 介绍 File System Access API 的文章。通过 File Handling API 通过文件系统提供的附加安全相关功能 借助 Access API,您可以通过操作系统的内置功能授予对特定文件的访问权限 这与通过 Web 应用显示的文件选择器相反。
但仍存在用户可能会意外授权 Web 应用访问文件的风险, 打开它。不过,通常应该理解为,打开文件可以让应用 来读取和/或处理该文件。因此,用户明确选择打开文件 (例如通过“打开方式...”)可视为足以 应用信任信号
默认处理程序验证
唯一的例外是,对于给定的文件类型,主机系统上没有应用。在 在这种情况下,某些主机操作系统可能会将新注册的处理程序自动提升为 默认处理程序,而静默且无需用户干预。这会 也就是说,如果用户双击此类文件,该文件就会自动在注册时打开 Web 应用。在此类主机操作系统上,如果用户代理确定 文件类型的默认处理程序,可能需要明确的权限提示来避免 在未经用户同意的情况下将文件内容意外发送到 Web 应用。
用户控制
该规范规定,浏览器不应将每个可作为文件处理文件的网站都进行注册
处理程序。文件处理注册应在安装之后进行控制,并且绝不会发生
尤其是在网站要成为默认处理程序的情况下。更确切地说
与盗用用户可能已拥有默认处理程序的 .json
等现有扩展程序相比
,网站应考虑制作自己的扩展程序。
透明度
所有操作系统都允许用户更改当前的文件关联。这不在范围内 。
反馈
Chrome 团队希望了解您使用 File Handling API 的体验。
向我们介绍 API 设计
API 是否有什么无法按预期运行?或者是否缺少方法 需要哪些资源或属性来实现您的想法?对安全性有疑问或意见 模型?
- 在相应的 GitHub 代码库中提交规范问题,或将您的想法添加到现有 问题。
报告实现存在的问题
您在 Chrome 的实现过程中是否发现了错误?或者,实现是否与规范不同?
- 在 new.crbug.com 上提交 bug。请务必提供尽可能多的细节信息
以及简单的重现说明,然后在
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 Khoury。本文由以下人员审核: Joe Medley。