Web Share API v2 文件分享与跨应用协作实践

概述Web Share API v2 在支持平台上允许 Web 应用分享文件至系统级分享目标（如原生应用）。通过 `navigator.canShare()` 与 `navigator.share()`，可实现与图片/文档等文件的跨应用协作。关键参数与概念`navigator.canShare({ files })`: 预检是否支持分享文件类型与数量。`navigator.share({ files, title, text })`: 触发系统分享面板，需用户激活（如点击）。用户激活与安全上下文：调用需在用户手势中进行，且页面需为安全上下文（https）。实践示例<input id="file" type="file" accept="image/*" multiple />

<button id="share">分享选中文件</button>

<script>

const input = document.getElementById('file')

const btn = document.getElementById('share')

btn.addEventListener('click', async () => {

const files = Array.from(input.files)

if (!files.length) return alert('请选择文件')

try {

if (navigator.canShare && navigator.canShare({ files })) {

await navigator.share({ files, title: '共享文件', text: '来自 Web 的分享' })

} else {

alert('当前环境不支持文件分享')

}

} catch (err) {

console.error('分享失败', err)

}

})

</script>

验证方法在支持平台（Android Chrome/Edge 等）验证图片/文档分享流程；在桌面端与不支持平台验证回退提示。检查用户激活与 HTTPS 安全上下文要求是否满足。结合日志与错误上报，统计分享成功率与取消原因。注意事项不同平台支持差异较大，应提供清晰的功能探测与替代方案（如生成下载链接或复制到剪贴板）。控制一次分享的文件数量与大小，避免触发平台限制或体验问题。隐私与权限：明确用户数据用途，避免在未经同意情况下收集或传输文件内容。