Web 共享 API 实践

大家好，欢迎阅读我的第一篇文章！
在这篇文章中，我将解释什么是 Web Share API 以及它可以做什么。如果你还没有使用过它，不妨在当前或下一个项目中尝试一下。

什么是 Web 共享 API？

假设你想将网站上一些页面特定的数据分享到一些社交媒体平台，甚至可能是即时通讯应用。Web
Share API 让 Web 开发者能够使用原生的分享机制，就像我们熟悉的原生应用那样（例如，点击 Safari 浏览器底部中心的分享按钮）。它是一些很酷的新 API 之一，它赋予了 Web 更多的功能，并进一步推动了“渐进式 Web 应用”这个关键词的发展。如果你还不明白我到底在说什么，这里有一张图片供你参考：

Web 分享 API - 点击按钮后在 iOS 上显示原生对话框

我为什么要使用 Web Share API？

您可能会问自己，为什么还要使用这个 API，因为您的应用程序中已经拥有了足够多的分享功能，例如 WhatsApp、Facebook、Twitter、LinkedIn 等。这当然没问题，但 Web Share API 就像一个很酷的新生事物，它能让您更轻松地实现这些分享功能。

不使用 Web Share API

在这种情况下，我们应该为每个社交媒体/Messenger平台提供一个链接/按钮。这意味着我们必须分别处理每个链接。这也意味着需要维护这些链接，因为它们将来可能会发生变化。

使用 Web 共享 API

在这种情况下，我们只需点击一个按钮。点击此按钮后，将显示原生对话框。这项原生功能的一个优点是用户熟知。另一个优点（我认为是更大的优点）是，如果有新的社交媒体平台或原生分享功能（在操作系统中），它会直接实现！一切都由原生机制完成！太棒了！🎉

如何使用 Web 共享 API？

和其他新推出的浏览器 API 一样，它是异步的。这意味着我们必须使用 Promises（如果你不熟悉 Promises，我相信你一定能找到一篇好文章）。在本例中，我们将调用我们的navigator.share()函数，它将返回一个 Promise：

const sharePromise = navigator.share(shareData);

好的，也许我们需要更多的背景信息来得到一个很好的例子。

让我们从share()接受数据对象 ( shareData) 作为参数的函数开始。此调用的结果将是一个原生分享对话框，其中包含一些分享目标，具体取决于传入的数据。分享目标是可选的，它会在对话框中显示给用户。这可以是联系人（通过 WhatsApp、Telegram 等）、原生应用或内置服务（例如“复制到剪贴板”）。需要明确的是，您无法决定向用户显示哪些分享目标，它们是由用户代理提供的。

那么让我们从最秘密的部分开始吧……shareData老实说，它只是一个可以包含以下成员的对象：

• 标题
• 文本
• 网址
• 文件

将来可能会有更多成员，但目前的状态是这样的。重要的是，不必提供所有数据成员，但至少应该提供一个成员。

用户代理会处理shareData这些，并将其转换为适合不同目标的格式。这可能包括合并或丢弃某些成员。但这些魔法是在后台完成的，我们只需稍事休息，欣赏一下精美的界面即可。🍹
您在原生对话框中看到的共享目标取决于有效shareData负载。总之，让我们深入了解该对象的不同成员shareData。

头衔会员

此成员是一个字符串，包含共享文档的标题。在我的测试中，我找不到它。因此，在大多数情况下，此成员在大多数目标上都不会显示或使用。

网址成员

url 成员只是一个简单的纯字符串 URL，它指向一个需要共享的资源。它可以是绝对 URL，也可以是相对 URL。如果你提供的是相对 URL，它会像href属性一样自动更新 URL。

专业提示：如果您只提供一个空字符串作为 url，那么它将自动引用当前页面。

文本成员

text 成员也是一个字符串选项，用于指定共享数据的消息正文。此成员通常用于共享目标（例如电子邮件正文）。

一切在行动

你可能会想，为什么我们没有讲到文件成员呢？请冷静一下，喘口气，我们几分钟后就会讲到。不过我想现在该写点代码了。终于到了🎉

假设我们的页面上有一个按钮，我们只想分享一些与当前页面相关的数据。JS 代码如下：

// our share button in the markup
const shareButton = document.getElementById('share');

// create share data object
const shareData = {
  title: 'Web Share API',
  text: 'The best way to share your data.',
  url: '' // reffers to the current page
};

// click event handler is necessary to call navigator.share()
shareButton.addEventListener('click', async () => {
  // does the browser supports the feature?
  if(navigator.share) {
    try {
      await navigator.share(shareData);
      console.log('🥳 Shared via API.');
    } catch(error) {
      console.log(`😢 ${error}`);
    }
  } else {
    // you could do a fallback solution here ... 
    console.log('😢 Your browser does not support the web share api.')
  }
})

现在让我们一步步分析代码。首先，我们创建一个对象并添加一些成员，在本例中是title、text和url。然后，我们为 添加了事件监听器shareButton。在事件处理程序中，我们检查navigator.share，因为我们想检查浏览器是否支持 Web Share API。如果不支持，它将返回undefined并执行 else 分支。对于所有不支持此功能的浏览器，可能存在一个回退解决方案。如果我们考虑渐进式增强，这至少是最好的。但在本文中，我们将重点关注 if 分支。

首先，我们将打开try代码块并调用navigator.share(shareData)其中的函数。现在，原生对话框将打开，其中包含所有可能的共享目标。await我们将等待 Promise 被满足，也就是说，直到用户取消共享或选择共享目标。取消共享后，上面的代码将运行catch代码块。如果用户最终通过共享目标共享了数据，则 Promise 将被解决。这样，我们就成功地通过 Web Share API 共享了一些数据 🎉

ℹ️重要提示：即使分享成功，我们也不会获得任何详细信息。Promise 本身只会返回undefined。我们无法获取用户选择的分享目标。我知道这有点令人失望，但这是有原因的。

有一项要求是不允许网站了解安装了哪些应用程序或选择了哪个应用程序share()，因为这些信息可用于指纹识别，以及泄露有关用户设备的详细信息。https ://www.w3.org/TR/web-share/

文件成员

现在该讨论一下files成员了。该成员以数组的形式包含所有共享文件。添加此成员后shareData，我们必须处理二进制数据，代码会变得稍微复杂一些。不过别担心，我们会一起来仔细研究。

又到了发挥想象力的时候了💭……
想象一下，如果用户点击了我们的分享按钮，你想分享一张超酷的图片。我们需要像这样加载文件：

const image = await fetch('./super-cool-looking.jpeg');
const blob = await image.blob();
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
const filesArray = [file];

// add it to the shareData
shareData.files = filesArray;

在这几行代码中，我们获取图像，将原始数据转换为 BLOB（二进制大对象），并使用 File 接口创建一个新的 File。然后将其放入数组中。当然，您可以添加多个文件。
最后，我们只需将 files 属性添加到shareData对象，并使用 初始化它即可filesArray。

现在您可以通过 Web Share API 共享图片，但请注意，并非所有浏览器都支持此功能。您还可以检查浏览器是否支持文件共享。您可以使用navigator.canShare()以下函数进行检查。在我们的示例中，它看起来可能像这样：

if(navigator.canShare && navigator.canShare({files: filesArray})) {
  await navigator.share(shareData);
} else {
  console.log('File sharing is not supported.');
}

该函数与 函数类似，只有一个参数，如果浏览器支持共享你传入的对象 ( )，share()则返回true或。 但这种方法有一个很大的缺点，因为此功能尚处于实验阶段，并非所有浏览器都支持。遗憾的是，文件共享并非在所有设备和浏览器上都易于处理。但一如既往，请循序渐进地进行（如上所述），并支持现代浏览器。falseshareData

何时使用？

需要注意的是，该navigator.share()函数仅在用户交互（例如点击事件处理程序）时起作用。这意味着您无法在页面加载时运行该代码。这很好，因为否则我们可能会遇到诸如 Cookie 横幅或推送通知权限请求之类的愚蠢问题。

哪些浏览器支持 Web Share API？

我不想详细讨论它，因为它可能已经过时了。所以这里是Web Share API 支持的链接。

结论

如上所示，这种现代化的 JS 数据共享方式让代码变得简洁易懂。代码维护也变得简单，我们还能获得原生的共享机制，该机制还能自动支持未来的社交平台。我非常喜欢这种方法，并推荐您在下一个项目中尝试一下。如果您已经使用过这个 API，请在下方评论区分享您的想法。👇

我的消息来源

• w3c Web 分享
• mdn Web 共享 API
• web.dev Web 共享