Web Share API permission missing

Question

I'm trying to implement the Web Share Api functionality on my test web app but it doesn't seem I'm able to do it. This is the code:

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

Every time I try on both Firefox and Safari for iOS, I'm getting an error saying:

NotAllowedError: the request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

If on those browser I try to share something from google.com I get the native dialog to choose with which app to share.

I cannot understand why. On this page there is no discussion about permission: https://developers.google.com/web/updates/2016/09/navigator-share

UPDATE:

on Chrome for android works just fine, on Firefox for Android doesn't work. On Chrome, Firefox and Safari (which I believe they use safari engine all three) is only working if I pass "" which means the page itself, or "https://something.com/share/", it breaks If I pass "https://something.com/share/"+id :/

Answer 1

For other future users where the current answer is too specific to that code. The root issue is that the share() method must be called from a user gesture.

If the method call was not triggered by user activation, return a promise rejected with with a "NotAllowedError" DOMException. From the Web Share API.

---

A user activation is any of the following:

• change
• click
• contextmenu
• dblclick
• mouseup
• pointerup
• reset
• submit
• touchend

Answer 2

I understood what was the issue, which is absolutely annoying.

So:

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

This call is the one that is causing problems. If I comment it, on iOS there is no issue.

If I keep it I have no problem at all on Android but iOS will complain.

So I need to rethink the flow of the application to pass the id from outside the 'onClick' event.