Web 应用可以使用系统提供的共享功能与针对具体平台的应用相同。
借助 Web Share API,Web 应用可以使用系统提供的相同分享功能 作为针对特定平台的应用提供。Web Share API 可让 Web 应用 将链接、文本和文件分享到 平台专用应用的方式
。 <ph type="x-smartling-placeholder">![已安装 PWA 的选项。](https://web.developers.google.cn/static/articles/web-share/image/system-level-share-target-9be61b07242ad.png?authuser=7&hl=ro)
功能和限制
网络共享具有以下功能和限制:
- 它只能在通过 HTTPS 访问的网站上使用。
- 如果分享发生在第三方 iframe 中,则必须使用
allow
属性。 - 它必须被调用来响应用户操作(如点击)。调用
使用
onload
处理程序是不可能的。 - 它可以共享网址、文本或文件。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
-
<ph type="x-smartling-placeholder">
分享链接和文本
如需分享链接和文本,请使用 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
,则应检查以下位置中是否存在规范网址 <meta>
标记:
该网页的<head>
,并与他人分享。这将为发布商提供更优质的体验
用户。它不仅可以避免重定向,还可以确保将共享网址
特定客户端的正确用户体验例如,一位朋友
分享一个移动网址,而您在桌面设备上查看它,
您应该会看到桌面版:
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 中触发分享操作,请执行以下操作:
使用值为 web-share
的 allow
属性嵌入 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
。
“追踪圣诞老人”案例研究
<ph type="x-smartling-placeholder">![显示“分享”按钮的“追踪圣诞老人”应用。](https://web.developers.google.cn/static/articles/web-share/image/the-santa-tracker-app-sho-6ff6f0a0cebf4.png?authuser=7&hl=ro)
追踪圣诞老人是一个开源项目, 节日传统。每年 12 月,您可以欢度节日季 提供游戏和教育体验
2016 年,“追踪圣诞老人”团队在 Android 上使用 Web Share API。 此 API 非常适合移动设备。 过去几年,该团队移除了移动设备上的分享按钮,因为 他们很难确定拥有多个共享目标的合理性。
但借助 Web Share API,他们得以展示一个按钮, 节省宝贵的像素 他们还发现,与通过网络共享进行分享的用户相比, 未启用该 API 的用户。前往 追踪圣诞老人,看看“网络分享”功能的实际应用。
浏览器支持
浏览器对 Web Share API 的支持有细微差别,建议您使用功能 而不是假设某个特定方法 支持。
以下是对此功能的支持情况的概要。如需了解详情,请点击任一支持链接。
navigator.canShare()
-
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
-
<ph type="x-smartling-placeholder">
-
navigator.share()
-
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
-
<ph type="x-smartling-placeholder">
-
表示对 API 的支持
您打算使用 Web Share API 吗?您的公开支持对 Chromium 团队有所帮助 确定功能的优先级,并向其他浏览器供应商展示支持这些功能的重要性。
使用 # 标签向 @ChromiumDev 发送推文
#WebShare
并告诉我们您使用它的地点和方式。