为什么你应该在 PWA 中使用 Web Share API

从我的网站博客交叉发布。

渐进式 Web 应用 (PWA) 如今大热，这并非浪得虚名！PWA 相较于传统的 Web 应用和网站，能够显著提升用户体验。如果您不熟悉渐进式 Web 应用的概念，我建议您阅读Google 开发者平台上的这篇文章。

PWA 的主要目标是模糊 Web 应用和原生应用（使用原生技术构建，针对特定操作系统，例如 iOS 和 Android）之间的 UI/UX 界限。PWA 模糊这条界限的方法之一是提供与原生应用相同的原生体验功能。对于我们这些致力于构建优秀 PWA 的人来说，幸运的是，浏览器厂商一直在努力为我们解锁这些功能，包括添加到主屏幕、重新与推送通知互动，甚至连接到蓝牙设备！

向所有伟大的浏览器供应商致敬，感谢他们继续推动网络平台的发展！

这篇文章将重点介绍一小部分功能，如果正确实施，它将增强应用程序的原生感觉并有助于增强用户体验：共享。

共享

在当今世界，让用户轻松分享您的内容比以往任何时候都更加重要。这不仅能提升用户体验，还能提升内容在各种平台上的曝光度。您也能从中受益！

如果您想扩大受众和影响力，您的内容就需要易于分享。

传统上，我们 Web 开发者负责在 Web 应用中构建自定义的分享 UI，要么手动构建，要么利用第三方库或服务。例如，我的网站博客在其自定义分享 UI 中使用了几个React-share按钮和图标，如以下视频所示：

在没有其他选择的情况下，自定义共享 UI 方法非常棒！然而，它有几个主要缺点：

1. 我们无法知道每个用户需要哪些分享目标。不同的用户有不同的分享需求（通常是特定于行业/领域的），因此我们只能猜测最常用的分享目标列表，例如 Facebook、Twitter、Reddit 等。作为备用方案，我们有时会允许用户将 URL 复制到剪贴板。
2. 不同网站的分享界面看起来各不相同，迫使用户不得不花时间去了解当前网站分享界面的功能。此外，对于习惯了设备原生分享界面的用户来说，这种体验也令人沮丧。
3. 我们支持的分享目标数量有限。例如，我们无法创建一个按钮，让用户直接将内容分享到 Facebook Messenger 对话中。
4. 我们必须自己构建 UI 或依赖第三方库或服务。

有没有办法一次性解决所有这些问题？有的！欢迎 Web Share API 的到来！

Web 共享 API

2016 年，Chrome 团队在 Android 版 Chrome 61 中首次推出了Web Share API。此后，更多浏览器也开始支持该 API（更多内容即将推出）。Web Share API 释放了设备原生共享 UI 的强大功能，并使其能够被 Web 应用访问。

Web 应用程序本身不再负责共享 UI，而是通过 Web Share API，Web 应用程序可以指示浏览器显示特定可共享内容的本机共享 UI。

这种显示共享 UI 的方法解决了上面提到的所有问题：

1. 浏览器将共享 UI 的渲染交给操作系统 (OS)，操作系统能够识别所有可作为共享目标的已安装应用。然后，操作系统可以根据用户的共享习惯、偏好以及共享内容的具体类型，确定某些目标的优先级。太棒了！
2. 向用户呈现的共享 UI 与他们在其设备原生环境中看到的相同。
3. 所有可作为共享目标的已安装应用程序均显示为本机共享 UI 中的选项。
4. 我们无需手动构建任何东西，也无需依赖任何第三方软件。浏览器和操作系统会处理好一切！

这是它在我网站博客上的显示效果：

浏览器支持

截至撰写本文时，Web Share API 已在少数移动浏览器中实现，但尚未在桌面和移动端广泛采用。请查看“我可以使用 Web Share API”页面，了解最新的浏览器支持信息。

由于浏览器支持程度较低，最佳做法是在 Web 分享 API 可用时使用它，当它不可用时则回退到自定义分享 UI。我在我的网站上就采用了这种方法。在上面的视频中，请注意，当 Web 分享不支持时，触发自定义 UI 的按钮是如何触发原生 UI 的。开发者社区也采用了这种方法。

由于 Web Share API 非常易于使用，因此将其添加到您的 Web 应用中，对于浏览器中支持 Web Share 的用户来说，可以快速提升用户体验。让我们来看看它到底有多简单。

使用 Web 共享 API

由于构建和显示共享 UI 的所有繁琐工作都已由浏览器和操作系统完成，因此我们几乎无需进行任何操作即可让用户使用 Web Share 共享内容。只需执行两个步骤：

1. 验证当前浏览器是否支持 Web 共享
2. 如果是，请告诉它要分享什么！

当支持 Web 共享时，浏览器会share在全局window.navigator对象上公开一个函数。MDN文档对此函数进行了详细的描述。快来看看吧！

要检查 Web Share，我们需要做的就是检查此功能是否存在：

if (navigator.share) {
  // Web Share is supported
} else {
  // Web Share is not supported
}

为了减轻滥用，支持 Web Share 的浏览器需要navigator.share响应用户手势（例如单击共享按钮）进行调用：

myShareButton.addEventListener('click', () => {
  if (navigator.share) {
    // We can call navigator.share here!
  }
})

// We can't call it here

该navigator.share函数需要您告知它用户想要共享的内容。您可以将此信息指定为一个对象，其中包含几个可选键：url、text和title。虽然您的需求可能因应用的性质而异，但大多数情况下，您希望用户能够共享他们当前正在查看的页面。为此，您只需定义url和title键，我们在浏览器环境中可以轻松访问它们：

myShareButton.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      url: location.href,
      title: document.title
    })
  } else {
    // Show custom share UI
  }
})

规范网址

如果您的应用使用规范 URL，您可以查询文档中的规范 URL，并让该 URL 优先于location.href：

const canonicalLink = document.querySelector('link[rel=canonical]')
const url = canonicalLink ? canonicalLink.href : location.href

navigator.share({
  url,
  title: document.title
})

对分享的反应

如果您的应用需要响应分享操作，navigator.share请返回一个 Promise 以方便您使用。以下示例使用awaitPromise 来处理，但您也可以像往常一样轻松地串联.then()调用.catch()。

try {
  await navigator.share({ url, title })
  console.log('Thanks for sharing!')
} catch (e) {
  console.error('Could not share!', e)
}

这就是全部内容了！

概括

Web Share API 代表着 Web 分享的未来。无论您是否将 Web 应用视为 PWA，都应该在 Web Share API 可用时使用它。只需几行代码即可检查浏览器支持情况并有条件地调用该 API！

超越网络共享

要构建一款让用户感觉与原生应用体验相同或相当的 Web 应用，需要付出大量努力。Google的这份清单详尽列举了 PWA 的所有功能，并分为基准功能和示例功能两类。

你们中的一些人可能已经在构建新的 PWA 或将现有的 Web 应用迁移到 PWA 中。如果是这样，不要被所涉及的工作量吓倒。与其关注整个任务的艰巨性，不如根据预期的影响确定功能的优先级，一次专注于一个功能，并确定并执行快速见效的方案（例如 Web Share！），以便以更快的速度推动你的应用朝着正确的方向发展。在过程中，别忘了重新评估你的优先级！

感谢您的阅读，祝您编码愉快！

喜欢这篇文章吗？

在 Twitter 上关注我，我会在那里发布关于前端的推文：@thesnups