I am currently attempting to integrate the Web Share API feature into my testing web application, but unfortunately, I seem to be encountering some difficulties. Below is the code snippet I have been working with:
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>}
On both Firefox and Safari for iOS, I consistently receive an error message that reads as follows:
NotAllowedError: the request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Interestingly, when trying to share content from google.com on these browsers, a native dialog box appears offering options for sharing through different apps.
The reason behind this issue is unclear to me at the moment since there is no mention of permission-related discussions on this page: https://developers.google.com/web/updates/2016/09/navigator-share
UPDATE:
The functionality works smoothly on Chrome for Android, but encounters issues on Firefox for Android. Strangely, on Chrome, Firefox, and Safari (all three of which I believe use the Safari engine), the sharing function only works when passing either `""` (which refers to the current page) or `"https://something.com/share/"`. However, it breaks when passing `"https://something.com/share/"+id`.