缺少 Web 共享 API 权限

Question

我正在尝试在我的测试网络应用程序上实现 Web Share Api 功能，但我似乎无法做到。这是代码：

const newVariable: any = navigator;
{newVariable && newVariable.share && <IconButton aria-label="Share" onClick={async (e) => {
try {
  const id = await shareRepository.shareTrip(this.props.todolist)
  const url = "https://something.com/share/" + id
  await newVariable.share({
      title: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival,
      text: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival,
      url: url,
  })
} catch (error) {
  alert(error)
}
}}>
<ShareIcon />
</IconButton>}

每次我在 Firefox 和 iOS 版 Safari 上尝试时，都会收到一条错误消息：

NotAllowedError：当前上下文中用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

如果在这些浏览器上我尝试从 google.com 共享某些内容，我会得到本机对话框来选择要与哪个应用共享。

我不明白为什么。此页面上没有关于权限的讨论：https://developers.google.com/web/updates/2016/09/navigator-share

更新：

在 Chrome for android 上运行正常，在 Firefox for Android 上不起作用。在 Chrome、Firefox 和 Safari 上（我相信它们都使用了 safari 引擎这三个）只有在我通过 "" 这意味着页面本身或 "https://something.com/share/" 时才会工作，如果我通过 "https://something.com/share/"+id 就会中断：/

Answer 1

对于当前答案过于特定于该代码的其他未来用户。根本问题是必须从用户手势调用share() 方法。

如果方法调用不是由用户激活触发的，则返回一个带有“NotAllowedError”DOMException 的 promise 被拒绝。 From the Web Share API.

---

用户激活是以下任何一种：

• 改变
• 点击
• 上下文菜单
• dblclick
• 鼠标移动
• 指针
• 重置
• 提交
• 触摸结束

Answer 2

我明白是什么问题，这绝对是烦人的。

所以：

  const id = await shareRepository.shareTrip(this.props.todolist)

此调用是导致问题的调用。如果我评论它，在 iOS 上没有问题。

如果我保留它，我在 Android 上完全没有问题，但 iOS 会抱怨。

所以我需要重新考虑应用程序的流程，以便从 'onClick' 事件之外传递 id。