Question

我正在为我正在工作的网站（https://developers.google.com/web/updates/2016/09/navigator-share）实施新的Web Share API。尽管Safari桌面，iOS Safari和Android Chrome支持它，但其他任何浏览器均不支持。我可以使用不受支持的浏览器进行后备支持，以共享文本和网站链接吗？

Answer 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");

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

Answer 2

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

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

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

Answer 3

是的，您可以检查。网络共享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

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

Web Share API后备

4 个答案: