如何使用 Web Share API

The Web Share API 是一个似乎自它首次在 Chrome 61 for Android 中推出以来就一直处于雷达之下。 实际上，它提供了一种方法来 **触发设备的原生分享对话框**（或桌面，如果使用 Safari）在分享内容时 - 例如链接或名片 - 直接从网站或网络应用程序。

虽然用户可以通过原生方式从网页分享内容，但他们必须在浏览器菜单中找到选项，即使这样，也无法控制分享的内容。 这个 API 的引入允许开发者通过利用用户设备上的原生内容分享功能，将分享功能添加到应用程序或网站中。

这种方法比传统方法提供了许多优势。

• 与您在 DIY 实现中可能具有的有限数量相比，用户可以获得广泛的分享内容选项。
• 您可以通过摒弃来自各个社交平台的第三方脚本，来提高页面加载时间。
• 您不需要为不同的社交媒体网站和电子邮件添加一系列按钮。 一个按钮就足以触发设备的原生分享选项。
• 用户可以在自己的设备上自定义他们首选的分享目标，而不是局限于预定义的选项。

关于浏览器支持的说明

在我们深入了解 API 的工作原理之前，让我们先解决浏览器支持问题。 坦白说，现在的浏览器支持并不理想。 它只适用于 Chrome for Android 和 Safari（桌面和 iOS）。

但不要让这阻止您在您的网站上采用这个 API。 正如您将要看到的那样，为不支持它的浏览器实施一个回退是非常容易的。

使用它的几个要求

在您可以在自己的网络项目上采用这个 API 之前，有两件主要的事情需要注意。

• 您的网站必须 通过 HTTPS 提供服务。 为了方便本地开发，API 在您的网站通过 localhost 运行时也能工作。
• 为了防止滥用，API 只能在响应某些用户操作（如 click 事件）时触发。

以下是一个示例

为了演示如何使用这个 API，我准备了一个 演示，它与 我的网站 上的工作方式基本相同。 以下是它的外观。

查看 CodePen 上 Ayooluwa (@ayoisaiah) 的笔
WebShare API 演示 - 开始 。
在 CodePen 上。

此时，当您点击分享按钮时，会弹出一个对话框，并显示一些分享内容的选项。 以下是帮助我们实现此功能的代码部分。

shareButton.addEventListener('click', event => {
  shareDialog.classList.add('is-open');
});

让我们继续将此示例转换为使用 Web Share API。 首先要做的是检查 API 是否确实在用户的浏览器上得到支持，如下所示。

if (navigator.share) {
  // Web Share API is supported
} else {
  // Fallback
}

使用 Web Share API 就像调用 navigator.share() 方法并传递一个包含以下至少一个字段的对象一样简单。

• url：表示要分享的 URL 的字符串。 这通常是文档 URL，但它不必是。 您可以通过 Web Share API 分享任何 URL。
• title：表示要分享的标题的字符串，通常是 document.title。
• text：您要包含的任何文本。

以下是实践中的样子。

shareButton.addEventListener('click', event => {
  if (navigator.share) {
    navigator.share({
      title: 'WebShare API Demo',
      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
  } else {
    // fallback
  }
});

此时，一旦在支持的浏览器中点击了分享按钮，本机选择器就会弹出，并显示用户可以与之分享数据的目标。 目标可以是社交媒体应用程序、电子邮件、即时消息、SMS 或其他注册的分享目标。

API 是基于承诺的，因此您可以附加一个 .then() 方法来显示一个成功消息（如果分享成功），并使用 .catch() 处理错误。 在现实世界的场景中，您可能希望使用此代码片段来获取页面的标题和 URL。

const title = document.title;
const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;

对于 URL，我们首先检查页面是否具有规范 URL，如果有，则使用它。 否则，我们从 document.location 中获取 href。

提供回退是个好主意

在不支持 Web Share API 的浏览器中，我们需要提供一个回退机制，以便这些浏览器上的用户仍然可以获得一些分享选项。

在我们的例子中，我们有一个对话框弹出，其中包含一些分享内容的选项，我们演示中的按钮实际上没有链接到任何地方，因为，好吧，它只是一个演示。 但是，如果您想了解如何在没有第三方脚本的情况下创建自己的链接来分享网页，Adam Coti 的文章 是一个不错的起点。

我们要做的是为那些不支持 Web Share API 的浏览器上的用户显示回退对话框。 这与将打开分享对话框的代码移动到 else 块中一样简单。

shareButton.addEventListener('click', event => {
  if (navigator.share) {
    navigator.share({
      title: 'WebShare API Demo',
      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
  } else {
    shareDialog.classList.add('is-open');
  }
});

现在，所有用户都得到了保障，无论他们使用的是什么浏览器。 以下是对两个移动浏览器上分享按钮行为的比较，一个支持 Web Share API，另一个不支持。

试试看！ 使用一个支持 Web Share 的浏览器，和一个不支持的浏览器。 它应该与上面的演示类似地工作。

查看 CodePen 上 Ayooluwa (@ayoisaiah) 的笔
WebShare API 演示 - 结束 。
在 CodePen 上。

总结

这涵盖了您需要了解的关于 Web Share API 的基本知识。 通过在您的网站上实施它，访问者可以更轻松地在各种社交网络、联系人和其他原生应用程序中分享您的内容。

还值得注意的是，如果您满足 渐进式 Web 应用安装标准 并将其添加到用户的首页，您就可以将您的网络应用程序添加为分享目标。 这是 Web Share Target API 的一项功能，您可以在 Google Developers 上了解更多信息。

虽然浏览器支持参差不齐，但回退很容易实现，所以我认为没有理由让更多的网站不采用它。 如果您想了解更多关于这个 API 的信息，您可以在 此处阅读规范。

您使用过 Web Share API 吗？ 请在评论中 *分享* 它。