如何使用Web Share API

翻译：疯狂的技术宅

原文：css-tricks.com/how-to-use-…

未经容许严禁转载

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

虽然用户已经能够经过本地方式从网页共享内容，但他们必须在浏览器菜单中找到该选项，即便这样，也没法控制共享内容。此API的引入容许开发人员经过利用用户设备上的本机内容共享功能，将共享功能添加到 APP 或网站中。

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

• 向用户提供了多种共享内容的选项。
• 能够经过取消各个社交平台的第三方脚原本改善页面加载时间。
• 无需为不一样的社交媒体网站和电子邮件添加一系列按钮。单个按钮足以触发设备的本机共享选项。
• 用户能够在本身的设备上自定义他们的首选共享目标，而是不只限于预约义的选项。

关于浏览器支持

在咱们深刻了解 API 的工做原理以前，先要解决浏览器支持问题。说实话，目前浏览器支持不是很好。它仅适用于 Android 版 Chrome 和 Safari（桌面版和iOS版）。

下面的浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器支持该版本及以上版本的功能。

桌面

Chrome	Opera	Firefox	IE	Edge	Safari
No	No	No	No	No	12.1

手机/平板电脑

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
12.2	No	No	No	74	No

可是不要让这些阻止你在本身的网站上使用此 API。正如你所看到的，在不支持的浏览器上很容易实现备用方案。

使用它的一些要求

要在你本身的 Web 项目中使用这个 API ，有两件事须要注意：

• 你的网站必须经过 HTTPS 进行访问。为了便于本地开发，当你的站点在 localhost 上运行时，API也能够运行。
• 为了防止滥用，只能在响应某些用户操做时（例如 click 事件）触发API。

这是一个例子

To demonstrate how to use this API, I’ve prepared a demo that works essentially the same as it does on my site. Here’s how it looks like:

为了演示如何使用这个 API，我准备了一个demo，它与个人网站上的工做方式基本相同。这是它的样子：

CodePen上的演示：codepen.io/ayoisaiah/p…

See the Pen WebShare API Demo - Start by Ayooluwa ( @ayoisaiah) on 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 是基于 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，若是是，则使用该 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，另外一个没有：

在 Android 设备上测试支持该功能的共享按钮。 按下共享按钮时会触发 Android 的本机共享选项。 第二个测试显示在不支持该功能的 Android 设备上单击了贡献按钮。 这会产生手动添加的后备共享选项。

到 CodePen 上分别使用支持和不支持 Web Share 的浏览器去尝试一下！（codepen.io/ayoisaiah/p…

See the Pen WebShare API Demo - End by Ayooluwa ( @ayoisaiah) on CodePen.

总结

本文几乎涵盖了有关 Web Share API 的全部内容。把它加到你的网站上，访问者能够更轻松地经过联系人或其余原生应用在更多的社交网络上共享你的内容。

值得注意的是，若是你的 Web 应用符合渐进式 Web 应用的安装条件 ，则能够将作为共享目标添加到用户的主屏幕上。这是Web Share Target API 的一项功能，你能够在Google Developers上阅读相关内容。

虽然支持的浏览器不少，但很容易实现后备方案，因此我认为没有理由不该该采用这种方式。若是你想了解有关此 API 的更多信息，能够阅读此处的规范。

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

##欢迎关注前端公众号：前端先锋，获取前端工程化实用工具包。