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

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

Joe Medley
Joe Medley

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

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

功能和限制

网页共享具有以下功能和限制:

  • 它只能在通过 HTTPS 访问的网站上使用。
  • 如果分享是在第三方 iframe 中进行的,则必须使用 allow 属性。
  • 必须在响应用户操作(例如点击)时调用此方法。无法通过 onload 处理脚本调用它。
  • 可以分享网址、文本或文件。

浏览器支持

  • Chrome:89。
  • Edge:93.
  • Firefox:需要切换标志才能使用。
  • Safari:12.1。

来源

如需分享链接和文本,请使用 share() 方法,这是一种基于 Promise 的方法,具有必需的属性对象。为防止浏览器抛出 TypeError,对象必须包含以下属性之一:titletexturlfiles。例如,您可以分享文字而无需提供网址,反之亦然。允许使用这三个成员可扩大用例的灵活性。假设在运行以下代码后,用户选择了电子邮件应用作为目标。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));
}

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

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>

您可以在 Glitch 上的演示中查看此操作的实际运行情况,并查看源代码。如果未提供该属性,将会导致 NotAllowedError 并显示消息 Failed to execute 'share' on 'Navigator': Permission denied

追踪圣诞老人案例

显示分享按钮的“追踪圣诞老人”应用。
“追踪圣诞老人”应用的“分享”按钮。

Santa Tracker 是一个开源项目,是 Google 的一个节日传统。每年 12 月,您都可以通过游戏和教育体验欢庆这个季节。

2016 年,“追踪圣诞老人”团队在 Android 上使用了 Web Share API。此 API 非常适合移动设备。在过去几年里,该团队移除了移动设备上的分享按钮,因为空间非常有限,他们无法证明需要添加多个分享目标。

但借助 Web Share API,他们能够显示一个按钮,从而节省宝贵的像素。他们还发现,与未启用该 API 的用户相比,使用 Web Share 分享内容的用户增加了约 20%。前往 Santa Tracker 查看 Web Share 的实际运作方式。

浏览器支持

浏览器对 Web Share API 的支持因浏览器而异,建议您使用功能检测(如前面的代码示例中所述),而不是假定某种方法受支持。

下面简要介绍了对此功能的支持。如需了解详情,请点击任一支持链接。

navigator.canShare()

浏览器支持

  • Chrome:89。
  • Edge:93.
  • Firefox:需要切换标志才能使用。
  • Safari:14。

来源

navigator.share()

浏览器支持

  • Chrome:89。
  • Edge:93.
  • Firefox:需要切换标志才能使用。
  • Safari:12.1。

来源

显示对该 API 的支持

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

使用 #WebShare 标签向 @ChromiumDev 发送推文,告诉我们您在哪里以及如何使用该工具。