不常用的浏览器 API —— Web Share

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

这一节来看 Web Share API，这是一个用于共享内容的 API，与之前介绍的很多不常用的 API 不同，这个 API 更多的是用在移动页面上，调用系统级别分享能力使用的。下面来看一下这部分的内容。

Web Share API 只能用在安全上下文中，不能用在 WebWorker 中，结合功能效果来看这些都可以理解。我们可以在 navigator 上面访问这部分 API 内容，它只包含两个方法，navigator.canShare 和 navigator.share，前者可以获取 share 能力，后者可以用来处理 share 行为。

navigator.canShare 返回的是一个布尔值，用来标识内容是否可以 share，它可以接收一个 data 作为参数，传递参数后返回的是这个特定的数据类型是否可以被 share 的信息。

navigator.share 是实际的 share 操作，他可以接收一个 data 参数，data 中可以设置 url、text、title、files 几部分内容，share 方法会返回一个 promise 对象，只有分享成功时会 resolve，分享出错或者用户取消分享时会 reject，通常我们会先使用 canShare 判断是否可以分享，然后再调用 share 操作分享，可以参考下面的例子：

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Pictures',
    text: 'Our Pictures.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

share 之后会有操作系统的分享能力来进行处理，解析分享数据然后完成分享动作。

还有一点需需要注意，分享是需要由用户交互来触发不能自动触发，就是与 audio 的 paly 类似，必须要在用户真实的点击事件之后才能有效果，不能由程序自身调用。