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

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

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

注意：Web Share API 只有通过 HTTPS 提供内容时才能使用。

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

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', async () => {
  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)
  }
})

大致效果如下：

Chorme 浏览器
IOS Safari 浏览器

分享文件

上面介绍可选配置时，我们还看到了一个分享文件的 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('您的系统不支持共享文件。')
}