Web Share API

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

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

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

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

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

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

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

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

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

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

    这个 API 还可以分享文件，先使用navigator.canShare()方法，判断一下目标文件是否可以分享。因为不是所有文件都允许分享的，目前图像，视频，音频和文本文件可以分享2。

    1. if (navigator.canShare && navigator.canShare({ files: filesArray })) {
    2.   // ...
    3. }

    上面代码中，navigator.canShare()方法的参数对象，就是navigator.share()方法的参数对象。这里的关键是files属性，它的值是一个FileList实例对象。