那些被忽略但很好用的 Web API / Share

与你分享的快乐，胜过独自拥有

现代人看到有趣的网页、新闻、消息等等时，最常做的事情就是分享到社群帐号中，而现在社群软件数不胜数，Facebook、LINE、Instagram、twitter...等等。

起初，只有在 Android 和 iOS 的 APP 中你可以呼叫 OS 系统的原生分享介面，一般网页则还是得一个个处理各家社群软件的分享机制，所以你往往会在网页中看到一排社群软件的 LOGO 用来分享到不同地方。不过现在浏览器也提供了 Share API 来呼叫原生的分享介面了。

Share

虽然网页终於有 Share API 来让我们呼叫系统原生的分享介面，不过它的支援度还不是非常完善，其中对「电脑浏览器」不仅支援度低，就算有支援，也并没有提供社群网站的分享，提供的分享途径非常不实用。

而对於电脑的低支援度，我认为可能有两点原因：

• 系统权限：
  由於行动装置中的 APP 都是依照手机 OS（Android、iOS）的规范编写，所以手机 OS 能有相应的权限来开启「社群软件」的分享功能。反之电脑 OS (Microsoft、macOS) 没有任何权限去启动「社群网页」的分享功能。

• 操作习惯：
  电脑使用者一般的的分享手段还是以网址分享为主，这样的手段在电脑操作上是快速且方便的，而行动装置对於同样的操作是麻烦的，所以才需要原生分享的帮助。

随然我们平常多以电脑的视角在开发网页，不过为了加强行动装置的使用体验，Share API 还是有使用的需求性。

# Navigator.share

只要执行这个 method 就能启用分享功能，不过需要注意几个限制才能顺利使用：

• 最重要的当然是浏览器要支援
• 它必须经由使用者的操作／手势触发
• 网站必须要有 https 的协定

另外，呼叫 navigator.share 时还需要传入一个参数，用来设定分享内容或档案：

• ShareData： 该参数需为一个物件，当中的所有属性都是「可选的」，但必须至少有一项，可接受的属性有以下：
  • title: 一组字串，分享讯息的标题
  • text: 一组字串，分享讯息的描述
  • url: 一组字串，分享讯息要带上的连结
  • files: 一组 File 物件 的阵列，会成为分享内容的附件

你需要注意： 不是每个浏览器都能辨识所有的属性，若不能辨识时就会忽略。

你需要注意： 就算浏览器能辨认，不同的分享途径也可能会有不同的支援程度，例如脸书贴文就不支援 files，但 LINE、电子邮件就可以。

const shareBtn = document.querySelector(".share");
shareBtn.addEventListener("click", function () {
  const file = new File(["foo"], "foo.txt", { type: "text/plain" });
  const shareData = {
    title: "分享功能",
    text: "测试分享功能",
    url: "https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share",
    files: [file],
  };

  if (navigator.share) {
    // 有分享功能就分享
    navigator
      .share(shareData)
      .then(() => alert("分享成功"))
      .catch((err) => alert("发生错误:" + err));
  } else {
    // 没有分享功能就复制网址到剪贴簿
    navigator.clipboard
      .writeText(location.href))
      .then(() => alert("已复制网页网址"))
      .catch(() => alert("复制失败"));
  }
});

上方就是一个最基本的使用方式，利用 click 来触发事件，并且先确认浏览器的 navigator 有 share 这个 method 才去执行，并且传入一组 ShareData 物件，这样只要有有支援的浏览器以及分享途径就会开启并根据 ShareData 来组合分享讯息。

要注意的是，navigator.share 会回传一个 Promise，你可以利用 then 和 catch 来处理分享成功或失败的後续动作。

要是你希望网站有良好的传递性，非常建议使用 Share API，尤其是那些支援行动装置浏览的网站。尽管现在手机上的浏览器 APP 已经有内建的分享选项，但最直觉的操作还是直接显示在网页中的分享按钮。
有兴趣的话，这边提供 CodePen，你可以用手机来试试看分享功能。