Web上的分享（Share）API

我认为Web Share API很是酷，简而言之，它会利用您所使用的平台上的原生共享功能（若是该平台支持的话）。

我喜欢这个：

远远不止这些东西：

为何？

• Web Share API只是几行代码。简单！没有图像，没有重量级的JavaScript或iframe。
• 用户看到的UI是针对其平台定制的，甚至多是由他们定制的，以在其中包含他们想要的东西。

好样的，Web标准。

但并非全部地方都支持。例如，我在Chrome浏览器中写这篇博客文章，在桌面Chrome浏览器中没法使用，但在桌面的Safari中却能够工做

因此，若是我要使用它，我宁愿在把按钮放在页面上以前先测试一下是否支持。这是很是简单的：

if (navigator.share) {

}

下面是一个例子，若是API被支持的话，我把一个 <button> 放在文章上，HTML和CSS省略。

JavaScript作了一些花哨的动做来获取文章的标题和第一段，以便在API中使用。我喜欢Jeremy Keith在页面上的作法：

if (navigator.share) {
  navigator.share(
    {
      title: document.querySelector('title').textContent,
      text: document.querySelector('meta[name="description"]').getAttribute('content'),
      url: document.querySelector('link[rel="canonical"]').getAttribute('href')
    }
  );
}

你也能够将字符串传递给这些值，这只是在展现你如何在任何页面上动态地作一些工做。

Jeremy也一直在倡导创建一个JavaScript可选的Web Share API版本，他认为能够像这样工做。

<button type="share">

而后，指定标题和文本：

<button type="share" value="title,text">

用逗号对我来讲有点时髦，若是标题中包含逗号怎么办？那指定URL呢？咱们能够将它们所有分红属性吗？我想我知道Jeremy会说什么：这是一个简单的声明性版本，若是你想改变默认行为，那就是JavaScript的做用。

如何使用Web Share API

自从在Android的Chrome 61中首次引入以来，Web Share API彷佛已经受到关注。从本质上讲，它提供了一种方法，当直接从网站或Web应用程序分享内容时，能够触发设备（或桌面，若是使用Safari）的本地分享对话框，例如连接或联系卡。

虽然用户已经能够经过原生方式分享网页上的内容，但他们必须在浏览器菜单中找到这个选项，即便如此，也没法控制分享的内容。该API的引入让开发者能够利用用户设备上的原生内容分享功能，将分享功能添加到应用或网站中。

与传统方法相比，这种方法具备许多优点：

• 与你在DIY实现中可能拥有的有限数量的内容相比，用户将得到普遍的内容分享选择。
• 你能够经过删除各个社交平台上的第三方脚原本缩短页面加载时间。
• 你不须要为不一样的社交媒体网站和电子邮件添加一系列按钮，一个按钮就足以触发设备的原生分享选项。
• 用户能够在本身的设备上定制本身喜欢的分享目标，而不是仅仅局限于预约义的选项。

关于浏览器支持的说明

在介绍API的工做细节以前，咱们先把浏览器支持的问题解决掉。说实话，目前浏览器的支持度并不高。它只适用于Android版Chrome浏览器，以及Safari（桌面和iOS）。

但不要所以而不肯意在网站上采用这个API。要实现一个支持不提供支持的浏览器的后备功能是很容易的，你会看到的。

使用它的一些要求

在您本身的Web项目上采用此API以前，须要注意两点：

• 您的网站必须经过HTTPS提供服务。为了促进本地开发，当您的站点经过localhost运行时，该API也可使用。
• 为了防止滥用，API只能在响应一些用户操做（如点击事件）时触发。

这是一个例子

为了演示如何使用这个API，我准备了一个demo，它的工做原理与个人网站上的工做原理基本相同。该示例使用DIY方式，本身自定义分享对话框。

此时，一旦点击分享按钮，就会弹出一个对话框，显示出分享内容的几个选项，这是代码的一部分，可帮助咱们实现这一目标：

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。一般是文档的网址，但不是必须的。您能够经过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
  }
});

这时，一旦在支持的浏览器中点击分享按钮，原生选取器就会弹出全部用户能够分享数据的可能目标。目标能够是社交媒体应用、电子邮件、即时通信、短信或其余注册分享目标。

API是基于Promise的，因此你能够附加一个 .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的浏览器中，咱们须要提供一种后备机制，以便那些浏览器上的用户仍然可使用一些共享选项。

在上面的DIY例中，咱们弹出一个对话框，其中有一些用于共享内容的选项，而且演示中的按钮实际上并无连接到任何地方，由于这是一个演示。可是，若是您想了解如何在不使用第三方脚本的状况下建立本身的连接来共享网页，那么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的浏览器和不支持的浏览器。它的工做原理应该与上面的演示相似。

结束

这几乎涵盖了您须要了解的有关Web Share API的基本内容。经过在您的网站上实施它，访问者能够在更普遍的社交网络上更容易地与联系人和其余原生应用程序分享您的内容。

另外值得注意的是，若是你的Web应用符合WPA Web应用安装标准，你可以将其添加为共享目标，并添加到用户的主屏幕上。Web Share Target API的此功能，您能够在Google Developers上了解。

尽管对浏览器的支持很少，但回退很容易实现，所以我认为没有理由不采用这种方式。

您是否使用过Web Share API？请在评论中分享。

---

原文：https://css-tricks.com/how-to...