如何使用Web Share API[每日前端夜话0x84]

翻译：疯狂的技术宅

来源：css-tricks

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

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

iOS提供了许多本机共享选项

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

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

关于浏览器支持

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

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

桌面

手机/平板电脑

但是不要让这些阻止你在自己的网站上使用此 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，它与我的网站【https://freshman.tech/】上的工作方式基本相同。这是它的样子：

CodePen上的演示：https://codepen.io/ayoisaiah/pen/WBpzBo

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

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

让我们在此示例转的基础上更改使用 Web Share API。首先要检查用户的浏览器是否支持该 API，如下所示：

1if (navigator.share) { 
2  // Web Share API is supported 
3} else { 
4  // Fallback 
5}

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

• url：表示要共享的 URL 的字符串。通常是页面的URL，但也不一定。你可以通过 Web Share API 共享任何URL。
• title：表示要共享的标题的字符串，通常是 document.title。
• text：你要包含的任何文字。

以下是实践中的表现：

 1shareButton.addEventListener('click', event => { 
 2  if (navigator.share) { 
 3    navigator.share({ 
 4      title: 'WebShare API Demo', 
 5      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' 
 6    }).then(() => { 
 7      console.log('Thanks for sharing!'); 
 8    }) 
 9    .catch(console.error); 
10  } else { 
11    // fallback 
12  } 
13});

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

API 是基于 promise 的，因此你可以附加一个 .then() 方法，如果共享成功，可能会显示成功消息，并用 .catch() 进行错误处理。在实际场景中，你可能希望使像以下代码段一样去获取页面的标题和 URL：

1const title = document.title; 
2const 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 的文章【https://css-tricks.com/simple-social-sharing-links/】 为你提供了一个很好的思路。

我们想要做的是在不支持 Web Share API 的情况下在浏览器上显示备用的对话框。这就像把打开共享对话框的代码移动到 else 块中一样简单：

 1shareButton.addEventListener('click', event => { 
 2  if (navigator.share) { 
 3    navigator.share({ 
 4      title: 'WebShare API Demo', 
 5      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' 
 6    }).then(() => { 
 7      console.log('Thanks for sharing!'); 
 8    }) 
 9    .catch(console.error); 
10  } else { 
11    shareDialog.classList.add('is-open'); 
12  } 
13});

现在，无论使用哪种浏览器，都可以覆盖所有用户。以下是两个移动浏览器上共享按钮行为的比较，一个支持Web Share API，另一个没有：

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

到 CodePen 上分别使用支持和不支持 Web Share 的浏览器去尝试一下！（https://codepen.io/ayoisaiah/pen/YbNazJ）它应该与上述演示类似。

总结

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

值得注意的是，如果你的 Web 应用符合渐进式 Web 应用的安装条件【https://developers.google.com/web/fundamentals/app-install-banners/#criteria】，则可以将做为共享目标添加到用户的主屏幕上。这是Web Share Target API 的一项功能，你可以在Google Developers【https://developers.google.com/web/updates/2018/12/web-share-target】上阅读相关内容。

虽然支持的浏览器很多，但很容易实现后备方案，所以我认为没有理由不应该采用这种方式。如果你想了解有关此 API 的更多信息，可以阅读此处的规范【https://wicg.github.io/web-share/】。

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

原文：https://css-tricks.com/how-to-use-the-web-share-api/