Web Share API

优质
小牛编辑
134浏览
2023-12-01

概述

网页内容如果要分享到其他应用,通常要自己实现分享接口,逐一给出目标应用的连接方式。这样很麻烦,也对网页性能有一定影响。Web Share API 就是为了解决这个问题而提出的,允许网页调用操作系统的分享接口。

这个 API 不仅可以改善网页性能,而且不限制分享目标的数量和类型。社交媒体应用、电子邮件、即时消息、以及本地系统安装的、且接受分享的应用,都会出现在系统的分享弹窗,这对手机网页尤其有用。另外,使用这个接口只需要一个分享按钮,而传统的网页分享有多个分享目标,就有多少个分享按钮。

目前,桌面的 Safari 浏览器,手机的安卓 Chrome 浏览器和 iOS Safari 浏览器,支持这个 API。

这个 API 要求网站必须启用 HTTPS 协议,但是本地 Localhost 开发可以使用 HTTP 协议。另外,这个 API 不能直接调用,只能用来响应用户的操作(比如click事件)。

接口细节

该接口部署在navigator.share,可以用下面的代码检查本机是否支持该接口。

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

navigator.share是一个函数方法,接受一个配置对象作为参数。

navigator.share({
  title: 'WebShare API Demo',
  url: 'https://codepen.io/ayoisaiah/pen/YbNazJ',
  text: '我正在看《Web Share API》'
})

配置对象有三个属性,都是可选的,但至少必须指定一个。

  • title:分享文档的标题。
  • url:分享的 URL。
  • text:分享的内容。

一般来说,url是当前网页的网址,title是当前网页的标题,可以采用下面的写法获取。

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

navigator.share的返回值是一个 Promise 对象。这个方法调用之后,会立刻弹出系统的分享弹窗,用户操作完毕之后,Promise 对象就会变为resolved状态。

navigator.share({
  title: 'WebShare API Demo',
  url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
  console.log('Thanks for sharing!');
}).catch((error) => {
  console.error('Sharing error', error);
});

由于返回值是 Promise 对象,所以也可以使用await命令。

shareButton.addEventListener('click', async () => {
  try {
    await navigator.share({ title: 'Example Page', url: '' });
    console.log('Data was shared successfully');
  } catch (err) {
    console.error('Share failed:', err.message);
  }
});

参考链接