Web Share API 成为 W3C 推荐标准

W3C Web 应用工作组发布

Web Share API 推荐标准：

https://www.w3.org/TR/web-share/

W3C 推荐标准（W3C Recommendation）是基于广泛共识且获得 W3C 及其成员单位一致认可的技术规范，是 W3C 推荐广泛部署的 Web 标准，并依据《W3C 免版税专利政策》免费开放给公众使用。

该规范定义了一个 Web 平台 API 用于将文本、链接和其他内容分享到用户选择的任意目的地。

navigator.share({title: 'Example Page', url: 'https://example.com'});

这里并没有指定可用的分享目标，它们是由用户代理（UA）提供的，比如可以是应用程序、网站或联系人。

使用示例

---

分享文本与连接：

shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

分享文件：

shareButton.addEventListener("click", async () => {
  const file = new File(data, "some.png", { type: "image/png" });
  try {
    await navigator.share({
      title: "Example File",
      files: [file]
    });
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

验证分享：

const file = new File([], "some.png", { type: "image/png" });

// Check if files are supported
if (navigates.canShare({files: [file]})) {
  // Sharing a png file would probably be ok...
}

// Check if a URL is ok to share...
if (navigates.canShare({ url: someURL })) {
  // The URL is valid and can probably be shared...
}

检查是否支持分享的对象：

为了确保传递的每个对象都被用户代理所支持，可以将它们单独传递给canShare() 以检查它们是否得到支持。

const data = {
  title: "Example Page",
  url: "https://example.com",
  text: "This is a text to share",
  someFutureThing: "some future thing",
};
const allSupported = Object.entries(data).every(([key, value]) => {
  return navigator.canShare({ [key]: value });
});
if (allSupported) {
  await navigator.share(data);
}

或者可以调整应用程序的 UI 从而不显示不支持的对象的 UI 组件。

const data = {
  title: "Example Page",
  url: "https://example.com",
  text: "This is a text to share",
  someFutureThing: "some future thing",
};

// Things that are not supported...
const unsupported = Object.entries(data).filter(([key, value]) => {
  return !navigator.canShare({ [key]: value });
});

在第三方上下文中启用 API：

第三方可以通过 iframe 的 allow 属性来使用这个API。

<iframe
  src="https://third-party.example"
  allow="web-share">
</iframe>

或者通过指定 HTTP 响应头在第一方上下文中禁用该 API。

Permissions-Policy: web-share=()

分享内容的能力通常依赖于提供“分享”功能的底层操作系统，也依赖于 OS UI 约定。例如，一些操作系统提供“分享表单”，而其他操作系统则依赖于弹出式菜单。鉴于上述这些依赖关系，实现者们正在努力将 Web Share API 引入所有操作系统。

进一步参阅 W3C Web 应用工作组主页，获取更多信息：‍

https://www.w3.org/groups/wg/webapps