Web 应用可以使用与平台专用应用相同的系统提供的共享功能。
借助 Web Share API,Web 应用能够使用与平台专用应用相同的系统提供的共享功能。借助 Web Share API,Web 应用可将链接、文本和文件共享给设备上安装的其他应用,共享方式与平台专用应用共享的方式相同。
![系统级共享目标选择器,可以选择已安装的 PWA。](https://web.developers.google.cn/static/articles/web-share/image/system-level-share-target-9be61b07242ad.png?authuser=9&hl=fi)
功能和限制
网络共享具有以下功能和限制:
- 它只能用在通过 HTTPS 访问的网站上。
- 如果分享发生在第三方 iframe 中,必须使用
allow
属性。 - 它必须调用以响应用户操作(例如点击)。无法通过
onload
处理程序调用该函数。 - 它可以共享网址、文本或文件。
分享链接和文本
如需分享链接和文字,请使用 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>
您可以在 Glitch 上的演示中查看此操作的实际效果,并查看源代码。未能提供该属性将导致 NotAllowedError
并显示消息 Failed to execute 'share' on 'Navigator': Permission denied
。
“追踪圣诞老人”案例研究
![显示“分享”按钮的“追踪圣诞老人”应用。](https://web.developers.google.cn/static/articles/web-share/image/the-santa-tracker-app-sho-6ff6f0a0cebf4.png?authuser=9&hl=fi)
追踪圣诞老人是一个开源项目,是 Google 的一项节日传统。每年 12 月,您都能通过游戏和教育体验来庆祝节日
2016 年,“追踪圣诞老人”团队在 Android 平台上使用了 Web Share API。 此 API 非常适合移动设备。 过去几年,该团队移除了移动设备上的分享按钮,因为空间有限,他们无法合理地使用多个共享目标。
但借助 Web Share API,他们得以呈现一个按钮,节省宝贵的像素资源。他们还发现,通过网络分享功能进行分享的用户比未启用该 API 的用户多 20% 左右。前往追踪圣诞老人,了解网络分享功能的实际效果。
浏览器支持
浏览器对 Web Share API 的支持有细微差别,建议您使用功能检测(如前面的代码示例中所述),而不是假设特定方法受支持。
以下是对此功能的支持概况。如需了解详情,请点击任一支持链接。
navigator.canShare()
navigator.share()
显示对该 API 的支持
您打算使用 Web Share API 吗?您的公开支持有助于 Chromium 团队确定功能的优先级,并向其他浏览器供应商表明支持这些功能的重要性。
请使用 # 标签 #WebShare
向 @ChromiumDev 发送一条推文,并告诉我们您使用该产品的位置和方式。