如何使用Web共享API

自 Chrome 61 for Android 首次推出 Web 共享 API 以来，它似乎一直默默无闻。实际上，它提供了一种方法，可以在直接从网站或 Web 应用程序共享内容（例如链接或联系人卡片）时，触发设备的原生共享对话框（如果使用 Safari，则为桌面）。

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

这种方法比传统方法有很多优势：

• 与您在 DIY 实现中可能拥有的有限数量的选项相比，用户可以获得更广泛的内容共享选项。
• 通过取消来自各个社交平台的第三方脚本，您可以缩短页面加载时间。
• 您无需为不同的社交媒体网站和电子邮件添加一系列按钮。只需一个按钮即可触发设备的原生共享选项。
• 用户可以在自己的设备上自定义他们首选的共享目标，而不会仅限于预定义的选项。

浏览器支持说明

在我们详细介绍 API 的工作原理之前，让我们先解决浏览器支持的问题。说实话，目前浏览器支持情况并不理想。它仅适用于 Chrome for Android 和 Safari（桌面和 iOS）。

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面端

移动/平板电脑

但不要因此而气馁，不要在您的网站上采用此 API。正如您将看到的，实现对不支持它的浏览器的回退非常容易。

使用 API 的一些要求

在您可以在自己的 Web 项目上采用此 API 之前，需要注意两点：

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

示例

为了演示如何使用此 API，我准备了一个演示，其工作原理与我的网站基本相同。以下是它的外观：

目前，单击共享按钮后，将弹出一个对话框，显示一些共享内容的选项。以下是帮助我们实现此目标的代码部分：

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

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

<code>if (navigator.share) {
  // 支持 Web 共享 API
} else {
  // 回退
}</code>

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

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

以下是实际应用中的样子：

<code>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 {
    // 回退
  }
});</code>

此时，一旦在支持的浏览器中单击共享按钮，本机选择器将弹出所有用户可以共享数据的可能目标。目标可以是社交媒体应用程序、电子邮件、即时消息、短信或其他已注册的共享目标。

该 API 基于 Promise，因此您可以附加 .then() 方法来显示共享成功的消息，并使用 .catch() 处理错误。在现实场景中，您可能希望使用以下代码段获取页面的标题和 URL：

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

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

提供回退是个好主意

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

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

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

<code>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');
  }
});</code>

现在，无论用户使用什么浏览器，所有用户都得到了覆盖。以下是共享按钮在两个移动浏览器上的行为比较，一个支持 Web 共享 API，另一个不支持：

试试看！使用支持 Web 共享的浏览器和不支持的浏览器。它应该与上述演示类似。

总结

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

还值得注意的是，如果您的 Web 应用程序满足渐进式 Web 应用程序安装标准并添加到用户的主屏幕，则您可以将其添加为共享目标。这是您可以阅读 Google Developers 上的 Web 共享目标 API 的一项功能。

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

您使用过 Web 共享 API 吗？请在评论中分享您的经验。

以上是如何使用Web共享API的详细内容。更多信息请关注PHP中文网其他相关文章！