通过 Web Share API 与操作系统共享界面集成

Web 应用可以使用与平台专用应用相同的系统提供的分享功能。

Joe Medley

借助 Web Share API，Web 应用能够使用与平台专用应用相同的系统提供的分享功能。借助 Web Share API，Web 应用可以像平台专用应用一样，将链接、文本和文件分享到设备上安装的其他应用。

注意： 分享只是其中一个功能。Web 应用也可以是分享目标，这意味着它们可以接收来自平台专用应用或 Web 应用的数据、链接、文本和文件。请参阅接收共享数据，了解如何将应用注册为分享目标。

系统级分享目标选择器，其中包含已安装的 PWA 选项。

功能和限制

Web Share 具有以下功能和限制：

• 它只能在通过 HTTPS 访问的网站上使用。
• 如果分享发生在第三方 iframe 中，则必须使用 allow 属性。
• 必须在响应用户操作（例如点击）时调用。无法通过 onload 处理程序调用它。
• 它可以分享网址、文本或文件。

Browser Support

• 128
• 93
• 
• 12.1

Source

分享链接和文字

如需分享链接和文本，请使用 share() 方法，这是一种基于 promise 的方法，具有必需的属性对象。 为防止浏览器抛出 TypeError，该对象必须至少包含以下属性之一：title、text、url 或 files。例如，您可以分享不含网址的文本，反之亦然。允许所有这三个成员可以提高应用场景的灵活性。假设在运行以下代码后，用户选择了一个电子邮件应用作为目标。title 参数可能会成为电子邮件主题，text 可能会成为邮件正文，而文件可能会成为附件。

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

如果您的网站有多个网址指向同一内容，请分享该网页的规范网址，而不是当前网址。您不应分享 document.location.href，而应在网页的 <head> 中检查是否存在规范网址 <meta> 标记，并分享该网址。这会为用户提供更好的体验。它不仅可以避免重定向，还可以确保共享网址为特定客户端提供正确的用户体验。例如，如果朋友分享了一个移动网址，而您在桌面设备上查看该网址，则应该会看到桌面版：

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

分享文件

如需分享文件，请先测试并调用 navigator.canShare()。然后在对 navigator.share() 的调用中添加文件数组：

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

请注意，该示例通过测试 navigator.canShare() 而不是 navigator.share() 来处理特征检测。传递给 canShare() 的数据对象仅支持 files 属性。 您可以分享特定类型的音频、图片、PDF、视频和文本文件。 如需查看完整列表，请参阅 Chromium 中允许的文件扩展名。未来可能会添加更多文件类型。

在第三方 iframe 中分享

如需从第三方 iframe 中触发分享操作，请嵌入具有 allow 属性且值为 web-share 的 iframe：

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

“追踪圣诞老人”案例研究

“追踪圣诞老人”分享按钮。

追踪圣诞老人是一个开源项目，也是 Google 的一项节日传统。每年 12 月，您都可以通过游戏和教育体验来庆祝节日。

2016 年，追踪圣诞老人团队在 Android 上使用了 Web Share API。此 API 非常适合移动设备。 在过去几年中，该团队移除了移动设备上的分享按钮，因为空间非常宝贵，他们无法证明有多个分享目标是合理的。

但借助 Web Share API，他们只需提供一个按钮，从而节省了宝贵的像素。 他们还发现，使用 Web Share 的用户分享的内容比未启用该 API 的用户多 20% 左右。前往追踪圣诞老人，了解 Web Share 的实际应用。

浏览器支持

浏览器对 Web Share API 的支持情况不尽相同，因此建议您使用特征检测（如前面的代码示例中所述），而不是假设支持特定方法。

以下是对此功能支持情况的简要说明。如需了解详细信息，请点击任一支持链接。

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

显示对 API 的支持

您是否打算使用 Web Share API？您的公开支持有助于 Chromium 团队确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。

使用 #WebShare 标签向 @ChromiumDev 发送推文，告诉我们您在何处以及如何使用它。

实用链接

• Web Share 演示
• Scrapbook PWA