share_target

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表.

类型 对象

share_target 清单成员允许已安装的 渐进式 Web 应用 (PWA) 在系统共享对话框中注册为共享目标。

注册并安装后，使用 Web 共享目标 API 的 PWA 充当内容共享目标，与典型的系统共享目标（如电子邮件、消息传递应用和其他可以接收共享内容的原生应用）并列。

注意：如果您想使用 Web 共享 API 共享数据，请参阅 Web 共享 API 和 navigator.share().

属性

要定义应用程序如何接收共享数据，清单中的 share_target 对象可能包含以下属性（action 和 params 是必需的）

action

Web 共享目标的 URL。

enctype 可选

使用 POST 请求时共享数据的编码。在 GET 请求中忽略。

method 可选

要使用的 HTTP 请求方法。可以是 GET 或 POST。如果共享数据包含图像等二进制数据，或者如果它更改了目标应用（例如，如果它创建了一个数据点，例如书签），请使用 POST。

params

用于配置共享参数的对象。对象键对应于 navigator.share() 中的 data 对象。对象值可以指定，并将用作查询参数

  • title 可选：用于共享文档标题的查询参数的名称。
  • text 可选：用于共享消息文本（或正文）的查询参数的名称。
  • url 可选：用于共享资源 URL 的查询参数的名称。
  • files 可选：定义共享目标接受哪些文件的对象（或对象数组）。该对象需要以下属性
    • name：用于共享文件的表单字段的名称。
    • accept：接受的 MIME 类型或文件扩展名的字符串（或字符串数组）。

示例

使用 GET 接收共享数据

可以使用以下 share_target 清单成员注册共享目标

json
{
  "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 接口可用于处理您的应用程序中的共享数据并执行相关操作。

js
const sharedName = url.searchParams.get("name");
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");

使用 POST 接收共享数据

如果共享请求包含一个或多个文件，或者在您的应用程序中产生副作用，则应使用 HTTP POST 方法。例如，如果您的应用程序接收图像以进行进一步处理，或者想要将共享链接保存为您的数据库中的书签。

json
{
  "share_target": {
    "action": "/save-bookmark/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

您可以使用服务器端代码处理 POST 共享数据，或者，为了为离线用户提供更好的体验，可以使用 fetch 事件侦听器拦截 HTTP 请求，这允许在 服务工作者 中访问数据。

js
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 类型或文件扩展名。最好同时定义这两个属性，因为操作系统在它们之间可能有所不同。

json
{
  "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 以读取文件。为了从服务工作者上下文将文件传递到客户端上下文，一种解决方案是将文件暂时写入 Cache 或 IndexedDB，然后使用 Client.postMessage() 通知其客户端。

安全和隐私

只有在您的 PWA 已安装的情况下，它才能充当 Web 共享目标。另请参阅 如何使 PWA 可安装.

与 HTML 表单提交类似，您应该注意通过共享目标发送到您的应用程序的数据。在使用传入数据之前，请务必验证其有效性。

规范

规范
Web 共享目标 API
# share_target-member

浏览器兼容性

BCD 表格仅在浏览器中加载