无需登录 数据私有 本地保存

Web Share API 实践器 - 调用系统分享对话框

18
0
0
0
浏览器支持状态 检测中...
快捷填充：
0/200
0/500
点击选择文件或拖拽到此处 图片、PDF、文档等
点击「调起系统分享」将调用设备原生分享对话框
分享内容预览
未设置标题
未设置文本内容
分享日志

暂无分享记录

常见问题与知识点
什么是 Web Share API？
Web Share API 是一个浏览器原生API，允许网页调用设备（操作系统）的系统分享对话框。用户可以将网页内容分享到任何已安装的应用（如微信、邮件、短信、社交媒体等），无需集成第三方SDK。它通过 navigator.share() 方法实现，支持分享标题、文本、URL及文件。
哪些浏览器支持 Web Share API？
移动端：Safari iOS 12+、Chrome for Android、Firefox for Android、Edge for Android、Samsung Internet 均完整支持。
桌面端：Chrome 89+（Windows/macOS）、Edge 89+、Safari 15+（macOS）支持基础分享。文件分享（Level 2）在桌面端的支持有限，主要适用于移动端。
注意：必须在 HTTPS 或 localhost 环境下才能使用。
为什么我的浏览器无法使用分享功能？
常见原因：
① 非HTTPS：Web Share API严格要求安全上下文，请确保页面通过HTTPS访问（或使用localhost本地开发）；
② 浏览器不支持：部分桌面浏览器（如Firefox桌面版）尚未实现此API；
③ 用户手势：分享必须在用户交互（如点击按钮）的上下文中触发，不能自动调用；
④ 内容为空：至少需要提供title、text、url或files中的一个有效参数。
canShare() 方法有什么用？
navigator.canShare(data) 用于预先检测浏览器是否支持分享指定的数据。它返回布尔值，帮助开发者在调用分享前判断可行性。例如：navigator.canShare({text: 'hello'}) 检测文本分享能力；navigator.canShare({files: fileArray}) 检测文件分享能力。注意：canShare对files参数的检测在某些浏览器中可能抛出异常，建议用 try-catch 包裹。
Web Share API 支持分享哪些类型的文件？
理论上支持任意MIME类型的文件，但实际可分享的类型取决于目标应用的接受能力。常见的文件类型包括：图片（JPEG、PNG、GIF、WebP、AVIF）、PDF文档、音频文件（MP3、WAV）、视频文件（MP4）、文本文件等。
限制：单个文件大小通常受系统限制（如Android的Intent传输限制约100MB），且分享大量文件时可能影响性能。分享文件使用 navigator.share({files: [file1, file2]}) 语法。
分享失败或用户取消如何区分？
navigator.share() 返回一个Promise：
✅ 成功：Promise resolve，用户完成了分享操作；
❌ 用户取消：Promise reject 并抛出 AbortError（DOMException.name === 'AbortError'）；
❌ 其他错误：如数据无效抛出 TypeError，或浏览器内部错误。建议在catch中区分错误类型，给用户相应的反馈。
在桌面端如何使用这个工具？
如果桌面浏览器支持Web Share API（如Chrome/Edge最新版+HTTPS），点击「调起系统分享」即可弹出系统分享对话框。
如果浏览器不支持，本工具提供剪贴板回退方案：点击「复制到剪贴板」会将分享内容格式化后复制，您可以粘贴到任何应用中。桌面端推荐使用此方式作为替代。
Web Share API 与传统的社交分享SDK有何优势？
① 隐私保护：无需加载第三方脚本，不泄露用户数据给社交平台；
② 包体积：零依赖，不需要引入额外的JS SDK；
③ 用户体验：使用系统原生UI，与设备体验一致；
④ 覆盖面广：自动适配所有已安装的分享目标应用，无需逐一对接；
⑤ 维护成本低：浏览器原生支持，无需跟踪第三方API变更。
🔧 相关工具