51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课免费课排行榜短视频直播课软考学堂
全部课程软考信创认证华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库

#码力全开·技术π对# 如何在 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
浏览
赞
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
key_3_feng
key_3_feng

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

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

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

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

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

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

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

分享
微博
QQ
微信https://www.51cto.com/aigc/
回复
8天前
发布
相关问题
#码力全开·技术π对# 如何在 Web 应用中使用 Web Share API 与 Google 的 ShareTarget 实现跨平台内容分享
100浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Web 应用中使用 Google 的 Web Locks API 协同管理跨标签页的数据一致性？
46浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Web 应用中使用 Google Maps JavaScript API 实现大规模点聚合？
151浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Web 应用中使用 Google 的 Web Bundles (WBEP) 与 Signed Exchanges 实现内容
76浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Web 应用中使用 Google 的 Lighthouse CI 实现自动化性能监控与质量门禁？
133浏览 • 2回复 待解决
#码力全开·技术π对# 如何在 Web 应用中使用 Google 的 WebGPU 结合实现浏览器端大模型推理加速？
22浏览 • 3回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 WorkManager 与 FCM 结合？
129浏览 • 1回复 待解决
#码力全开·技术π对#如何在Google App Engine上部署高并发的Web应用？
3546浏览 • 1回复 待解决
#码力全开·技术π对#PWA（渐进式Web应用程序）与传统Web应用相比，提供了哪些额外的功能和优势？
470浏览 • 2回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 CameraX ImageAnalysis 与 TensorFlow Lite 实现低延迟？
72浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 Jetpack Compose Navigation 与 Hilt 实现依赖注入驱动的
107浏览 • 0回复 待解决
#码力全开·技术π对# 如何在我的 Web 应用中集成 Google AI 的自然语言处理（NLP）服务？
738浏览 • 2回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 Jetpack DataStore 与 Proto DataStore 实现类型安全？
6浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 Jetpack Compose 与 WebView 协同实现动态内容渲染与安全
60浏览 • 0回复 待解决
#码力全开·技术π对#在使用Google Maps API时，如何降低API调用的成本？
294浏览 • 2回复 待解决
当在 Google Maps API 基础上开发应用时，如何优化地图数据的加载与渲染机制
1147浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 WorkManager 与 AlarmManager 协同实现跨设备唤醒的周期性
109浏览 • 4回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 CameraX 与 ML Kit 实现实时人脸遮挡检测？
171浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Google Cloud 上配置 Cloud NAT 与 Private Google Access 协同工作？
72浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 Jetpack Compose 实现高性能的懒加载列表？
92浏览 • 0回复 待解决
如何使用Google OAuth 2.0保护API访问？#码力全开·技术π对#
3811浏览 • 1回复 待解决
#码力全开·技术π对#如何利用WebAssembly提升Web应用的性能？
331浏览 • 1回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 Media3 ExoPlayer 扩展支持低延迟直播？
187浏览 • 0回复 待解决
#码力全开·技术π对# 如何在 Android 应用中使用 Jetpack Compose 协同实现高性能自定义图形渲染？
33浏览 • 0回复 待解决
#码力全开·技术π对#在使用Google Vision API时，如何优化图像识别的准确率？
531浏览 • 1回复 待解决
提问