I'm trying to implement a share button that uses the Web Share API in a website that I'm developing using create-react-app.

I'm testing the website using Chrome on MacOS and Safari on iPhone.

Before implementing this, I used my iPhone to test the website. I could do this accessing the "On Your Network" link that create-react-app displayed after building.

You can now view blahblahblah in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.101:3000

Note that the development build is not optimised.

But I ran into problems when testing the Web Share API on the iPhone: I couldn't make the button work. After some investigation, I noticed that:

• iOS Safari would can run the Web Share button normally when accessing the deployed website (in a https address)
• iOS Safari would cannot run the Web Share button when accessed by the Network link.

Basically, I have this function that successfully share a link if run by the deployed website, but displays an alert if run by the Network link.

const webShare = () => {
  if (navigator.share) {
    navigator
      .share({
        title: "web.dev",
        text: "Check out web.dev.",
        url: "https://web.dev/",
      })
      .then(() => console.log("Successful share"))
      .catch((error) => console.log("Error sharing", error));
  } else {
    alert("Share is not supported");
  }
};

I suspect that this has to do with the Network local link being http (http://10.0.0.101:3000) as the Web Share API can run only on secure contexts (https)

Not sure about how to proceed here, I wanted to test my website in my iPhone without having to deploy it every time. I searched a bit about "port forwarding in Chrome", but looks like it only works with Android devices (and I'm not sure I completely understand what port forwarding is - and if it would solve my problem in the first place

Any help would be appreciated.