使用原生 Web 共享 JavaScript API

您是否知道可以使用 JavaScript 调用本机共享功能？

你可能在网上见过它们。
如果没有，我添加了一个视频演示，让你看看它的外观。

有兴趣把它添加到你的网站吗？
跟我一起来构建吧。

JavaScript 原生 Web 共享 API

需要注意的是，此方法并不适用于所有浏览器，它主要针对移动设备构建，但 Safari 等一些桌面版本也支持它。

请记住，当您使用此功能时，您应该始终创建后备共享方法。

我们要做的第一件事是查看当前用户是否支持导航器。

我们可以使用该in方法来检查导航器是否具有共享功能。

确定它的代码如下所示：

if ('share' in navigator) {
  console.log('native share available');
} else {
  console.log('provide fallback share');
}

现在我们可以继续在我们的网页上添加一个可以点击的按钮。

<button id="share-button">Share me</button>

然后我们可以通过按钮的 ID 获取该按钮。

const shareButton = document.getElementById('share-button');

并附加一个监听器。

shareButton.addEventListener('click', (event) => {
  // Do the share action
});

在这个函数中，我们可以调用原生共享或者使用我们的后备共享机制。

shareButton.addEventListener('click', (event) => {
  if ('share' in navigator) {
    navigator
      .share({
        title: 'Look at this native web share',
        url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
      })
      .then(() => {
        console.log('Callback after sharing');
      })
      .catch(console.error);
  } else {
    console.log('provide fallback share');
  }
});

让我们仔细看看这里发生了什么。

我们将点击处理程序附加到按钮
我们检查是否有原生共享选项
- 是的：我们用标题和 URL 调用它
- 不：我们应该提供一些后备方案

如您所见，我们甚至可以将回调附加到原生的分享 API。
您可能想用它来感谢用户的分享或记录一些分析事件。

如果你有兴趣，可以在这个 CodePen 上尝试一下。

Web 共享 API 选项

在我们的示例中，我们设置了标题和 URL 选项。让我们看看还能提供什么。

Web 共享 API 接受以下选项：

title：代表标题的字符串（可能会被共享平台忽略）
URL：可分享链接的URL
text：表示有关共享操作的一些信息的字符串
文件：文件数组，支持多种文件选项

总的来说，你可以提供这样的对象：

const file = new File([blob], 'picture.jpg', { type: 'image/jpeg' });

navigator.share({
  title: 'Web Share',
  text: 'Testing out the web share API',
  url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
  files: [file],
});

浏览器支持

并非所有系统都支持此功能。不过，大多数移动浏览器都会支持。

一般来说，建议为共享选项设置自定义的后备模式。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/using-the-native-web-share-javascript-api-23ei