---

title: File Handling API 文件处理与 PWA 集成：manifest 配置与启动处理实践

tags:

• File Handling API
• file_handlers
• launchQueue
• 文件类型
• PWA集成

description: 使用 File Handling API 让 PWA 作为系统级文件处理程序，配置 manifest 的 file_handlers 并在应用启动时接收文件，提供验证指标与回退方案。

categories:

• 文章资讯
• 技术教程

---

背景与价值

• 将 Web 应用升级为系统文件处理器，提升编辑与打开流程的一致性。

manifest 配置示例

{
  "name": "示例编辑器",
  "start_url": "/",
  "display": "standalone",
  "file_handlers": [
    {
      "action": "/open",
      "accept": {
        "application/json": [".json"],
        "text/markdown": [".md"],
        "image/png": [".png"]
      }
    }
  ]
}

启动处理

if ('launchQueue' in window) {
  (window as any).launchQueue.setConsumer(async (params: any) => {
    if (!params.files?.length) return;
    for (const f of params.files) {
      const h = await f.getFile();
      openInEditor(h);
    }
  });
}

指标验证（Chrome 128/Edge 130 + 安装 PWA）

• 打开成功率：≥ 99%。
• 启动耗时（P95）：≤ 800ms。
• 类型覆盖：预设类型与扩展名匹配率 100%。

回退策略

• 不支持环境：提供站内文件上传入口与拖拽打开；注册系统协议或助手应用。

测试清单

• 多类型与批量打开：文件内容正确加载；错误类型提示清晰。