Web 共享 API 回退答案

【问题标题】：Web Share API FallbackWeb 共享 API 回退
【发布时间】：2020-11-17 22:23:08
【问题描述】：

我正在为我正在开发的网站 (https://developers.google.com/web/updates/2016/09/navigator-share) 实施新的 Web 共享 API。虽然 Safari Desktop、iOS Safari 和 Android Chrome 支持它，但任何其他浏览器都不支持它。我是否可以使用备用方案让不受支持的浏览器共享我网站上的文本和链接？

【问题讨论】：

标签： web share fallback

【解决方案1】：

我使用的一个备用方案是 Blob，请参阅此处的示例 https://codesandbox.io/s/bold-leaf-imu3w 它使用来自 npm 的“saveAs”库。

const blob = new Blob(['"Name","Value"\r\n"Alice","100"\r\n"Bob","200"'], {
  type: "text/csv"
});
saveAs(blob, "file.csv");

另一个建议是只显示一个常规页面，用户可以在其中选择数据并复制它

【讨论】：

【解决方案2】：

现在可能为时已晚，但正如您在“使用”部分下看到的那样，该行

`.catch((error) => console.log('Error sharing', error));`

提供了一种检查方法。因此，您可以侦听错误，并根据需要编写自定义共享按钮。

【讨论】：

【解决方案3】：

是的，您可以检查.web 共享 API 使用 navigator.share

if (navigator.share) {
     navigator.share({ 
        title: 'harish tech',
        text: 'Check out harishtech.com.', 
         url: 'https://harishtech.com', 
     }) 
    .then(() => console.log('Successful share'))
     .catch((error) => console.log('Error sharing', error));
 }else{
    // Your fall back code here
}

欲了解更多信息，请查看链接share like native app

【讨论】：

【解决方案4】：

如果它可以提供帮助，作为 React 项目的后备方案，我们构建了第二个组件来触发我们自己的模式并使用 https://github.com/nygardk/react-share：

export const ShareButton = props => {
  if (typeof navigator !== "undefined" && typeof navigator.share !== "undefined")
      return <ShareButtonNativeModal {...props} />
  else
    return <ButtonShareModal {...props} />
}

【讨论】：