Web Share API 调用需满足用户手势触发、HTTPS 安全上下文、非 iframe（或显式声明 allow="web-share"）；仅支持 title/text/url 三个字段，url 必须为绝对 URL；需检测 navigator.share 是否可用并捕获 NotAllowedError 等错误降级处理。
Web Share API 调用失败：常见报错 NavigateEvent 或 NotAllowedError
直接调用 navigator.share() 会失败，除非它发生在用户手势触发的上下文中（比如 click、tap），且页面是安全上下文（https:// 或 localhost）。Chrome/Firefox/Safari 都会抛出 NotAllowedError: Permission denied，如果在 setTimeout、fetch 回调或页面加载完成时调用，也会被拒绝。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须绑定到用户可感知的交互事件，例如
button的click，不能是mouseenter或自动触发 - 确保当前页面协议为
https（http://域名下完全不可用，连navigator.canShare都返回false） - 不要在
iframe中调用，除非该iframe显式声明了allow="web-share"属性
分享内容字段限制：哪些字段能传，哪些会被忽略
navigator.share() 只接受一个对象参数，支持 title、text、url 三个字段。注意：url 必须是绝对 URL（如 https://example.com/page），相对路径、blob:、data: 协议均不被接受；title 和 text 是可选字符串，但某些 Android 厂商定制系统（如小米、华为）可能只显示 text，忽略 title。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
url字段优先填真实页面链接，避免跳转页或短链（部分系统对重定向敏感） - 若需分享富媒体（图片/文件），Web Share API 不支持——得用
navigator.canShare({ files: [...] })判断后走share({ files })，但目前仅 Chrome on Android 支持files，iOS Safari 完全不支持 - 不要尝试传
image、description等非标准字段，会被静默丢弃
兼容性兜底：检测 navigator.share 是否可用并降级
不是所有浏览器都支持 Web Share API。iOS Safari 直到 iOS 16.4 才开始支持（且仅限于主屏 PWA），旧版 Edge（typeof navigator.share === 'function' 判断，还要结合 navigator.canShare()（它会校验参数合法性）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先检查
if ('share' in navigator)，再检查navigator.canShare({ url: 'https://...' })，两者都通过才启用按钮 - 降级方案推荐复制链接：
navigator.clipboard.writeText(url)，配合 Toast 提示“链接已复制” - 避免在不支持的环境里渲染“分享”按钮，或至少置灰并提示“仅限最新 Chrome/Safari”
完整最小可行示例（含错误处理）
const shareBtn = document.getElementById('share-btn');
if ('share' in navigator) {
shareBtn.addEventListener('click', async () => {
try {
await navigator.share({
title: '这篇文章很实用',
text: '快来看看这个 Web Share API 实操指南',
url: window.location.href
});
} catch (err) {
if (err.name !== 'AbortError') {
console.error('分享失败:', err.name, err.message);
// 这里触发降级：复制链接
navigator.clipboard.writeText(window.location.href);
}
}
});
} else {
shareBtn.style.display = 'none'; // 或替换为复制按钮
}
关键点在于：捕获 AbortError（用户主动取消分享）不用处理，其他错误（如 NotAllowedError、TypeError）应触发备选逻辑。iOS 上即使支持，也可能因系统设置关闭分享权限而失败，所以错误处理不能省。
真正容易被忽略的是：分享弹窗是否出现，不等于分享成功——用户可能点了取消，也可能目标 App 拒绝接收。业务侧如果依赖“已分享”做埋点或状态更新，只能靠 then 分支，不能假设 catch 外的代码一定执行。
