#码力全开·技术π对# 如何在 Web 应用中使用 Web Share Target API 与 Google 的 File System Access API

如何在 Web 应用中使用 Web Share Target API 与 Google 的 File System Access API 结合实现 PWA 接收并持久化共享文件？

一个笔记类 PWA 应用希望用户能从其他 App（如文件管理器、邮件）将图片或 PDF “分享到”该应用，并自动保存至浏览器沙箱文件系统。当前已通过 web-app-manifest 的 share_target 接收文件，但刷新后数据丢失。计划结合 File System Access API 实现持久化存储。挑战包括：如何在 onfetch 事件或页面加载时解析 GET 参数中的 name 和 type 并读取 Blob 数据；调用 window.showSaveFilePicker() 或 chrome.fileSystem.chooseEntry（DevTools）获取持久化句柄；将文件写入沙箱文件系统并建立索引；以及处理跨浏览器兼容性（Chrome 支持良好，Safari 无支持）。应如何构建具备文件持久能力的 PWA 分享接收功能？

Google

周周的奇妙编程

2025-08-27 12:51:32

浏览

回答 1

待解决

回答 1

按赞同

按时间

key_3_feng

在 Web 应用中结合 Web Share Target API 与 File System Access API，可实现接收外部共享文件并直接操作本地文件系统：

注册共享目标：在web-app-manifest.json 中添加share_target 字段，指定接收文件的路径与参数：

"share_target": {
  "action": "/receive",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": { "files": "file" }
}

当用户从其他应用（如文件管理器）分享文件时，浏览器会启动你的 Web 应用并导航至 /receive 页面。

处理共享文件：在 /receive 页面通过 navigator.serviceWorker 拦截 onfetch 事件，读取 FormData 中的文件对象。
使用 File System Access API：调用 window.showSaveFilePicker() 获取用户授权后，将共享的文件写入本地指定路径：

const fileHandle = await window.showSaveFilePicker();
const writable = await fileHandle.createWritable();
await writable.write(sharedFile);
await writable.close();

此组合允许 PWA 像原生应用一样接收并持久化存储外部共享内容，适用于笔记、图库等应用。

2025-08-29 23:40:23

发布

51CTO

51CTO博客

51CTO学堂

#码力全开·技术π对# 如何在 Web 应用中使用 Web Share Target API 与 Google 的 File System Access API