share_target
share_target 清单成员允许已安装的 渐进式 Web 应用 (PWA) 在系统的分享对话框中注册为分享目标。
一旦注册并安装，使用 Web 分享目标 API 的 PWA 就会作为一个内容分享目标，与其他典型的系统分享目标（如电子邮件、即时通讯工具和其他可以接收分享内容的本机应用）并列。
注意： 如果您想使用 Web Share API 分享数据，请参阅 Web Share API 和 navigator.share()。
值
share_target 成员的值是一个对象，用于定义应用程序如何接收分享的数据。该对象可以包含以下属性（action 和 params 是必需的）
action-
Web 分享目标的 URL。
enctype可选method可选-
要使用的 HTTP 请求方法。可以是
GET或POST。如果分享的数据包含二进制数据（如图片），或者会更改目标应用（例如，创建书签这样的数据点），则应使用POST。 params-
一个用于配置分享参数的对象。对象键对应于
navigator.share()中的data对象。对象值可以被指定，并将用作查询参数title可选：用于被分享文档标题的查询参数名称。text可选：用于被分享消息文本（或正文）的查询参数名称。url可选：用于被分享资源 URL 的查询参数名称。files可选：一个（或一系列）对象，用于定义分享目标接受的文件类型。该对象需要以下属性name：用于分享文件的表单字段的名称。accept：一个字符串（或字符串数组），包含接受的 MIME 类型或文件扩展名。
示例
使用 GET 接收分享数据
可以使用以下 share_target 清单成员注册一个分享目标
{
"share_target": {
"action": "/shared-content-receiver/",
"method": "GET",
"params": {
"title": "name",
"text": "description",
"url": "link"
}
}
}
当用户在系统的分享对话框中选择您的应用时，您的 PWA 将被启动，并向提供的 URL 发送一个 GET HTTP 请求，其中包含指定的查询参数。它看起来会是这样的：/shared-content-receiver/?name=a+shared+name&description=a+shared+description&link=https%3A%2F%2Fexample.com%2F。
URLSearchParams 接口可以方便地在您的应用程序中处理分享的数据并进行相应的操作。
const sharedName = url.searchParams.get("name");
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");
使用 POST 接收分享数据
如果分享请求包含一个或多个文件，或者会导致您的应用程序产生副作用，则应使用 HTTP POST 方法。例如，如果您的应用程序接收图片进行进一步处理，或者想在数据库中保存一个分享的链接作为书签。
{
"share_target": {
"action": "/save-bookmark/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
您可以通过服务器端代码处理 POST 分享数据，或者为了给离线用户提供更好的体验，可以使用 fetch 事件监听器来拦截 HTTP 请求，从而在 Service Worker 中访问数据。
self.addEventListener("fetch", (event) => {
// Regular requests not related to Web Share Target.
if (event.request.method !== "POST") {
event.respondWith(fetch(event.request));
return;
}
// Requests related to Web Share Target.
event.respondWith(
(async () => {
const formData = await event.request.formData();
const link = formData.get("link") || "";
// Instead of the original URL `/save-bookmark/`, redirect
// the user to a URL returned by the `saveBookmark()`
// function, for example, `/`.
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})(),
);
});
理想情况下，POST 请求应以 HTTP 303 See Other 重定向进行响应，以避免在用户触发页面刷新等情况下重复提交 POST 请求。
接收分享的文件
要接受分享的文件，HTTP 方法必须是 POST，enctype 必须是 multipart/form-data，并且必须提供一个定义接受文件类型的 files 条目。
文件必须有一个 name 属性，并且 accept 属性必须指定接受的 MIME 类型或文件扩展名。最好同时定义这两者，因为操作系统在偏好上可能有所不同。
{
"share_target": {
"action": "/file-collector",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "lists",
"accept": ["text/csv", ".csv"]
},
{
"name": "photos",
"accept": ["image/svg+xml", ".svg"]
}
]
}
}
}
要处理分享的文件数据，请参阅上面的 POST 示例和用于读取文件的 FileReader API。为了将文件从 Service Worker 上下文传递到客户端上下文，一种解决方案是暂时将文件写入 Cache 或 IndexedDB，然后使用 Client.postMessage() 通知其客户端。
安全与隐私
您的 PWA 只能在已安装的情况下充当 Web 分享目标。另请参阅 如何使 PWA 可安装。
与 HTML 表单提交类似，您应该谨慎处理通过分享目标发送到您应用程序的数据。在使用传入数据之前，请确保对其进行验证。
规范
| 规范 |
|---|
| Web 分享目标 API # share_target-member |
浏览器兼容性
加载中…