Web Share API 是一种用户体验增强功能，可让您避免向每个社交网络的页面添加数十个第三方脚本（有时很繁重且具有侵入性）。
它非常容易设置和理解，您可以通过将鼠标悬停在规范上来看到这一点 W3C 网络共享 API 其重量不及几十页。
从历史上看，为了允许用户分享文章，我们必须为每个平台（Twitter、Facebook、LinkedIn 等）集成特定按钮。这通常涉及逐个网络加载外部 JavaScript 库，或像 addThis 之类的捆绑解决方案，使页面膨胀，导致性能和隐私问题。
L’API 网络共享 通过允许网站使用操作系统的本机共享机制来改变游戏规则。因此，当您共享图库中的照片时，会打开相同的弹出窗口（或弹出窗口）。
Web Share API 有何用途？
好处有三：
- 加载的 JavaScript 更少，HTTP 请求更少。
- 无论目的地应用程序如何（WhatsApp、Signal、电子邮件、短信等），互联网用户都会找到自己的习惯和频繁联系。
- 一个按钮就足以定位所有可能的目的地。
（请记住，最好在同一页面上使用按钮来执行操作，并使用链接来执行导致上下文/页面更改的操作）。
移动设备和桌面设备之间的差异
尽管 API 是标准化的，但视觉行为因平台而异：
| 特征 | 移动设备（iOS/安卓） | 桌面（Windows/macOS） |
|---|---|---|
| 界面 | 本机共享弹出窗口 | 系统上下文菜单或专用窗口 |
| 兴趣 | 自然使用 | 实用但不太明显（通常仅限于电子邮件或 AirDrop） |
| 支持 | 几乎是普遍存在的 | 适合 Chromium、Safari、Edge；不是火狐 |
🔐 Web Share API 仅在安全环境中工作，即通过 HTTPS，并且必须由用户的自愿操作（单击或点击）触发，否则将被阻止。
支持
如果支持已广泛提供，尤其是在移动设备上，则某些环境（例如某些桌面操作系统上的 Firefox）尚未应用它，即使移动版本的 Firefox 可以识别它。
因此我们会考虑逐步改进：
- 我们检查是否
navigator.share存在。 - 如果是，我们将显示本机共享按钮。
- 如果没有，我们建议 替代方案（后备方案） ：将 URL 简单复制到剪贴板，例如API剪贴板，或者经典分享链接的显示（
mailto:、直接链接到网络等）。
我们可以分享什么
从技术角度来看，传递给方法的对象 navigator.share() 很灵活，但每个密钥都满足 W3C 规范定义的特定约束。
title
这是表示文档或共享元素的标题的字符串。如果用户选择电子邮件应用程序或预览的标题，它将被发现作为电子邮件的主题。它不是 HTML，只是纯文本。
text
这是共享的描述性正文，通常会放置摘要或个性化消息。在通过 SMS 或 WhatsApp 共享的情况下，此内容将填充输入字段。
url
表示有效 URL（绝对或相对）的字符串。浏览器会自动将相对 URL 解析为当前页面 URL，然后再将其发送到系统。
files
这是最复杂的加法。 ：对象数组 File （通常通过构造函数创建 new File() 或从一个检索 ）。共享文件之前，必须使用方法 navigator.canShare({ files: mesFichiers })，它将返回一个布尔值，指示系统是否接受文件的格式和重量。一般来说，我们通常接受图像、PDF、音频和视频，但不接受可执行文件（.exe、.js），这些文件将被阻止
代码示例 (Vanilla JS)
这是使用 Promise 的示例代码。
const shareBtn = document.querySelector('#btn-partage');
// On ne montre le bouton que si l'API est supportée
if (navigator.share) {
shareBtn.style.display = 'block'; // Ou un équivalent
shareBtn.addEventListener('click', async () => {
try {
await navigator.share({
title: 'Le titre de l'article',
text: 'Une courte description',
url: window.location.href
});
console.log('Contenu partagé avec succès !');
} catch (err) {
// L'utilisateur a annulé ou le partage a échoué
console.log(`Erreur ou annulation : ${err}`);
}
});
} else {
// Optionnel : afficher une autre solution (ex: copier le lien)
console.log("Web Share API non supportée sur ce navigateur.");
}
在相框里
现在要小心 在框架中 （ 实际上，这是上面由 codepen 托管的演示的情况）出于安全原因，您需要使用属性专门允许此 API allow="web-share"。