关于web-api:Web上的分享ShareAPI

我认为 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…