Web 共享 API 回退

Question

我正在为我正在处理的网站(https://developers.google.com/web/updates/2016/09/navigator-share(实现新的Web Share API。虽然Safari Desktop，iOS Safari和Android Chrome支持它，但任何其他浏览器都不支持它。是否有一个回退，我可以使用不受支持的浏览器来共享来自我的网站的文本和链接？

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

是的，你可以检查.web share 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
}

有关更多信息，请查看链接共享，如本机应用程序

Answer 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} />
}