使用 Web Share Target API 接收共享数据

利用 Web Share Target API 简化了移动设备和桌面设备上的分享功能

Pete LePage

Joe Medley

在移动设备或桌面设备上，共享操作应像点击共享按钮一样简单直接， 先选择应用，再选择分享对象。例如，您可能希望 分享有趣的文章：通过电子邮件发送给朋友或发 Twitter 微博 整个世界。

过去，只有平台专用应用才能向操作系统注册 接收其他已安装的应用分享的内容。但有了 Web Share Target API 后 可以通过底层操作系统注册 作为共享目标来接收共享的内容。

注意：Web Share Target API 只是神奇功能的一部分。Web 应用可以共享数据， 文件、链接或文本。请参阅 如需了解详情，请参阅 Web Share API。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 已安装 PWA 的选项。

查看“Web Share Target”的实际应用

1. 使用的是 Chrome 76 或更高版本（Android 版），或者 Chrome 89 或更高版本 请打开 Web Share Target 演示。
2. 出现提示时，点击安装将应用添加到主屏幕，或者 使用 Chrome 菜单将其添加到主屏幕。
3. 打开任何支持分享功能的应用，或使用“分享”按钮 演示
4. 从目标选择器中，选择 Web Share Test。

共享后，您应该会在 Web 共享目标 Web 应用。

将您的应用注册为共享目标

要将您的应用注册为共享目标，应用需满足 Chrome 的 可安装性标准。此外，用户必须先 用户必须将其添加到主屏幕。这样可以防止网站 将自己随机添加到用户的共享 intent 选择器中，并确保 分享是用户希望对您的应用执行的操作。

更新您的 Web 应用清单

如需将您的应用注册为共享目标，请向应用的 Web 页面添加 share_target 条目 应用清单。这会告知操作系统将您的应用添加为 intent 选择器中的一个选项。您向清单添加的内容可以控制 以及应用将接受的格式share_target 有三种常见情况 条目：

• 接受基本信息
• 正在接受应用更改
• 正在接受文件

。

注意：如果您想要共享到每个清单，则只能有一个 share_target 请在应用的不同位置提供相应选项 目标着陆页（由 url 条目指定的网页）。

接受基本信息

如果您的目标应用仅接受基本信息（如数据、链接、 和文本，请将以下代码添加到 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">

</ph> <ph type="x-smartling-placeholder">

</ph> 共享目标应用示例。

请务必验证传入的数据。遗憾的是，我们无法保证 应用会通过正确的参数分享合适的内容。

例如，在 Android 上，url 字段将为空，因为 在 Android 的共享系统中是不支持的相反，网址通常出现在 text 字段或偶尔使用 title 字段。

浏览器支持

Web Share Target API 受支持，如下所述：

在所有平台上，您的 Web 应用都必须先安装，然后才会显示为 用于接收共享数据的潜在目标。

示例应用

• Squoosh
• 剪贴簿 PWA

表示对 API 的支持

您打算使用 Web Share Target API 吗？您的公开支持对 Chromium 团队有所帮助 确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。

使用 # 标签向 @ChromiumDev 发送推文 #WebShareTarget 并告诉我们您使用它的地点和方式。