利用 Web Share Target API 简化了移动设备和桌面设备上的分享功能
在移动设备或桌面设备上,共享操作应像点击共享按钮一样简单直接, 先选择应用,再选择分享对象。例如,您可能希望 分享有趣的文章:通过电子邮件发送给朋友或发 Twitter 微博 整个世界。
过去,只有平台专用应用才能向操作系统注册 接收其他已安装的应用分享的内容。但有了 Web Share Target API 后 可以通过底层操作系统注册 作为共享目标来接收共享的内容。
<ph type="x-smartling-placeholder">![显示“分享方式”的 Android 手机抽屉式导航栏。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=9&hl=uk)
查看“Web Share Target”的实际应用
- 使用的是 Chrome 76 或更高版本(Android 版),或者 Chrome 89 或更高版本 请打开 Web Share Target 演示。
- 出现提示时,点击安装将应用添加到主屏幕,或者 使用 Chrome 菜单将其添加到主屏幕。
- 打开任何支持分享功能的应用,或使用“分享”按钮 演示
- 从目标选择器中,选择 Web Share Test。
共享后,您应该会在 Web 共享目标 Web 应用。
将您的应用注册为共享目标
要将您的应用注册为共享目标,应用需满足 Chrome 的 可安装性标准。此外,用户必须先 用户必须将其添加到主屏幕。这样可以防止网站 将自己随机添加到用户的共享 intent 选择器中,并确保 分享是用户希望对您的应用执行的操作。
更新您的 Web 应用清单
如需将您的应用注册为共享目标,请向应用的 Web 页面添加 share_target
条目
应用清单。这会告知操作系统将您的应用添加为
intent 选择器中的一个选项。您向清单添加的内容可以控制
以及应用将接受的格式share_target
有三种常见情况
条目:
- 接受基本信息
- 正在接受应用更改
- 正在接受文件
接受基本信息
如果您的目标应用仅接受基本信息(如数据、链接、
和文本,请将以下代码添加到 manifest.json
文件中:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
如果您的应用已有共享网址架构,您可以将 params
值。例如,如果您的分享网址
架构使用 body
而不是 text
,您可以将 "text": "text"
替换为 "text":
"body"
。
如果未提供,则 method
值默认为 "GET"
。enctype
字段(而非
用于表示数据的编码类型。
对于 "GET"
方法,enctype
默认为 "application/x-www-form-urlencoded"
,
如果设为其他任何值,则系统会忽略该属性。
正在接受应用更改
如果共享的数据以某种方式更改了目标应用(例如,保存了一个
书签 - 将 method
值设置为 "POST"
并包含
enctype
字段。以下示例在目标应用中创建了一个书签,
因此针对 method
使用 "POST"
,针对"multipart/form-data"
enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
正在接受文件
与应用更改一样,接受文件要求 method
为 "POST"
并且 enctype
存在。此外,enctype
必须为
"multipart/form-data"
和 files
条目。
您还必须添加一个 files
数组,用于定义应用接受的文件类型。通过
数组元素是包含两个成员(name
字段和 accept
)的条目
字段。accept
字段可接受 MIME 类型、文件扩展名或数组
同时包含这两者。最好提供一个既包含
MIME 类型和文件扩展名,因为操作系统不同,
。
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
处理传入的内容
如何处理收到的共享数据由您决定,具体取决于您的 应用。例如:
- 电子邮件客户端可以使用
title
作为 电子邮件地址,其中text
和url
作为正文串联在一起。 - 社交网络应用可以使用以下参数,在撰写新帖子时忽略
title
:text
作为消息正文,并添加url
作为链接。如果text
缺失,应用可能也会在正文中使用url
。如果缺少url
, 应用可能会扫描text
,以查找网址并将其添加为链接。 - 照片分享应用可以使用
title
作为 幻灯片标题,text
作为说明,files
作为幻灯片演示图片。 - 短信应用可以使用
text
和url
草拟一条新消息 串联在一起并丢弃title
。
处理 GET 分享
如果用户选择您的应用,并且您的 method
为 "GET"
(
则浏览器会在 action
网址处打开一个新窗口。浏览器会
使用清单中提供的网址编码值生成查询字符串。
例如,如果分享应用提供 title
和 text
,则查询字符串为
?title=hello&text=world
。如需处理此过程,请使用 DOMContentLoaded
事件监听器并解析查询字符串:
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
请务必使用 Service Worker 预缓存 action
这样,即便用户处于离线状态,它也能快速加载且稳定运行。
Workbox 是一款工具,
在 Service Worker 中实现预缓存。
处理 POST 分享
如果您的 method
为 "POST"
,那么当您的目标应用接受已保存的
书签或共享文件,那么传入的 POST
请求的正文会包含
共享应用传递的数据,使用 enctype
值进行编码
。
前台页面无法直接处理此类数据。由于网页是以
请求,页面将其传递给 Service Worker,您可以在其中使用
fetch
事件监听器。在这里,您可以将数据传回前台
使用 postMessage()
加载网页,或者将其传递给服务器:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
验证共享的内容
<ph type="x-smartling-placeholder">![一部 Android 手机,展示的是包含分享内容的演示版应用。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=9&hl=uk)
请务必验证传入的数据。遗憾的是,我们无法保证 应用会通过正确的参数分享合适的内容。
例如,在 Android 上,url
字段将为空,因为
在 Android 的共享系统中是不支持的相反,网址通常出现在
text
字段或偶尔使用 title
字段。
浏览器支持
Web Share Target API 受支持,如下所述:
在所有平台上,您的 Web 应用都必须先安装,然后才会显示为 用于接收共享数据的潜在目标。
示例应用
表示对 API 的支持
您打算使用 Web Share Target API 吗?您的公开支持对 Chromium 团队有所帮助 确定功能的优先级,并向其他浏览器供应商展示支持这些功能的重要性。
使用 # 标签向 @ChromiumDev 发送推文
#WebShareTarget
并告诉我们您使用它的地点和方式。