Web Share API.md

Web Share API

Web Share API 允许网站调用主机平台的本地共享功能的一种方法。

平常我们要分享网页的内容到其他应用，需要通过自己实现分享接口。而该 API 正是为了解决这个问题提出的，用于将数据（文本、URL、图像或文件）从 Web 共享到用户选择的应用程序。

该 API 不仅可以改善网页性能，只需要一个按钮，就可以实现多种分享方式，而且不限制分享目标的数量和类型。您平常使用分享的都可以使用到该 API，包括：社交媒体应用、电子邮件、即时消息、以及本地系统安装的、且接受分享的应用，都会出现在系统的分享弹窗，这对手机网页尤其有用

注意：Web Share API 只有通过 HTTPS 提供内容时才能使用，保存传输的安全。

以下是 Can I Use 给出 Web Share API 的支持情况：

目前，支持程度相对较低，桌面的 Safari 浏览器，手机的安卓 Chrome、Firefox 浏览器和 iOS Safari 浏览器支持该 API。

基本用法

const sharePromise = navigator.share(data)

data 为要分享的数据的对象。至少需要指定以下一个字段。可选配置包括：

• url —— 要分享的 URL。
• text —— 要分享的文本内容。
• title —— 要分享的标题。
• files —— 要分享的文件。

在使用时，可以先检查本机系统是否支持该接口。在不支持 Web Share API 的情况下，navigator.share 方法为将返回 undefined。

if (navigator.share) {
  // 支持
}

以下是一个简单的例子，展示了一个基本的共享操作。作为对按钮单击的响应，此 JavaScript 代码共享当前页面的 URL。

const text = {
  title: document.title,
  url: document.querySelector('link[rel=canonical]')
    ? document.querySelector('link[rel=canonical]').href
    : document.location.href,
  text: 'Hello World'
}

shareBtn.addEventListener('click', () => {
  navigator
    .share(text)
    .then(() => {
      console.log('谢谢分享！')
    })
    .catch((err) => {
      console.error('Error：', err)
    })
})

navigator.share 方法将会返回一个 Promise 对象。调用该方法后，会立即弹出系统的分享弹窗，一旦用户完成分享，这个 Promise 对象就会变为 resolved 状态。如果指定的共享数据格式不正确，promise 将会立即拒绝。如果用户取消了分享，promise 也会拒绝。

因为其返回的是 Promise 对象，所以也可以使用更简便的 async/await 方法：

const text = {
  title: 'Web Share API',
  url: 'https://www.jianshu.com/u/3f644e66afa3'
}

shareBtn.addEventListener('click', async () => {
  try {
    await navigator.share(text)
    console.log('已成功分享数据')
  } catch (err) {
    console.error('分享失败：', err.message)
  }
})

大致效果如下：

分享文件

上面介绍可选配置时，我们还看到了一个分享文件的 files 字段。

在分享文件之前，我们还需要使用 navigator.canShare() 方法，判断这个文件是可以否被分享。

注意：因为不是所有文件都允许分享的，目前只有图像、视频、音频和文本文件可以分享。

如果 navigator.canShare() 调用成功，将返回一个布尔值 true，表示该文件可以被分享。

const text = {
  files: filesArray,
  title: 'Picture',
  text: 'I am Superman'
}

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator
    .share(text)
    .then(() => console.log('分享成功'))
    .catch((err) => console.log('分享失败', err))
} else {
  console.log('您的系统不支持共享文件。')
}