Access to Web Share API requires permission

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`.

Answer №1

For future users who encounter a similar issue where the current answer is too narrow in scope. The main problem lies in the requirement for the share() method to be initiated by a user action.

If the call to the method does not originate from a user interaction, it will result in a promise rejection with an "NotAllowedError" DOMException. As outlined in the Web Share API documentation.


A user interaction can take various forms including:

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

Answer №2

After identifying the root of the problem, I find it to be quite frustrating.

Therefore:

  const identifier = await shareRepository.shareExcursion(this.props.todolist)

This particular function call seems to be triggering the issues at hand. By removing this line, the iOS platform runs smoothly without any hitches.

However, keeping it intact causes no trouble on Android but raises complaints on iOS.

To resolve this inconsistency, I have decided to reconsider the application's flow in order to pass the unique identifier from outside the 'onClick' event.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

getting information from a JSON array using AngularJS

Looking to extract all images from the imagePath array in the following JSON. While retrieving a single image works fine, encountering difficulties when trying to fetch the entire imagePath array. Any help with this issue would be greatly appreciated. Than ...

What causes a horizontal line to form when a user enters white space?

I have written a piece of code which seems to be causing an issue when running it. Whenever I input empty spaces, it results in creating a horizontal line. import React, { Component } from 'react'; export default class App extends Component { co ...

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

I am facing an issue with my JS application. I am unable to send data from jQuery to a PHP file, as I encountered this error message: POST https://magazyn.rob-tech.pl/savesettings.php 404 The app is running on PORT=8080 npm run start and the package.json ...

How is it that connecting an event listener to a React child component can be done in a way that resembles simply passing a prop

class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } handleClick(i) { // do things } render() { return ( <div ...

Issue with storage functionality in Vuex Axios response

Every time I send data to the Vuex storage using an axios response, for example: ** Sidebar.vue ** created(){ this.getRoles(); }, methods: { getRoles(){ var _this = this var roles = null this.$http.get('/api/userroles/ ...

Remove any list items that do not possess a particular class

My ul list contains several lis, and I need to remove all li elements that do not have children with the class noremove. This is the original HTML: <ul> <li>Item 1</li> <li>Item 2 <ul> <li>I ...

What is preventing me from accessing my session array in this.state.props from my mapStateToProps in React-Native Redux?

I am currently facing an issue with my Redux store setup. I am attempting to store an array of Session objects, where each Session object contains an array of Hand objects. However, when trying to access my store using `mapStateToProps`, none of the option ...

Positioning JQuery tooltips

I've been developing a simple tooltip tool (check out the fiddle link below), but I'm encountering some issues with positioning. My goal is to have the tooltip appear centered and above the clicked link, however right now it appears at the top le ...

The getElementById method in JavaScript can result in a null return value

Why is null returned by the getElementById method in JavaScript? <html> <head> <title>test_elementObject</title> <script language="JavaScript" type="text/javascript"> <!-- var input1 = document.getElementById ( " ...

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

The slice() method in arrays provides a reference to the elements rather than copying

In my file, I am exporting an object in the following manner: export const LINECHART2_DATA = { series: [{ data: [], name: 'HR', }, { etc... }] } The way I import it is like this: import { LINECHART2_DAT ...

Is it possible to create a THREE.js form using a sequence of outlines?

Consider the scenario where three two-dimensional shapes are present. To keep things simple, let's envision them all as circles: Is there a method in THREE.js that allows for these shapes to be 'stacked' on top of each other vertically, res ...

Implementing X.PagedList within a modal pop-up window

I have implemented a modal pop-up on a webpage: ... <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="companySearchModal" aria-hidden="true" id="companySearchModal"> <div class="modal-dialog" role="document"> ...

Guide to placing the cursor at a specified position within an editable content div

I am struggling with a div <div id="user_status" class="status expanddiv" onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?..."> Some Text will be inserted here. </div ...

Is there a way to adjust the time font size according to the dimensions of the time picker?

HTML and CSS .pickthetime { height: calc(var(--vh, 1vh) * 3); width: calc(var(--vw, 1vw) * 25); align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS font-weight: 300; } <input cla ...

Calculating the rotation angle of a spinning cylinder in Three.js animations

I'm struggling with this Math problem and my skills are failing me. To see my progress so far, you can view the working example here. After extracting the y and z positions from the rotating cylinder, I've managed to pause the animation when the ...

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

Create a JavaScript script within a CSS file

I'm attempting to create this using only CSS: Codepen and I would like to achieve the same effect but solely with CSS. This is what my CSS looks like: .text{ --a: calc(var(--a);*0.82+(1.5-var(--b);)/10); --b: calc(var(--b);+var(--a);); transfor ...

converting the names of files in a specific directory to a JavaScript array

Currently working on a local HTML document and trying to navigate through a folder, gathering all the file names and storing them in a JavaScript array Let's say I have a folder named Videos with files like: - VideoA.mp4 - VideoB.mp4 How can I cre ...

How to achieve the wrapping functionality in ReactJS that is similar to

Is there a ReactJS equivalent to jQuery's wrap method? I want to wrap menuContents with the following element: <ul className="nav nav-pills nav-stacked"></ul> The contents of menuContents are generated like this: let menuContents = thi ...