Estoy tratando de implementar un botón para compartir que usa la API Web Share en un sitio web que estoy desarrollando usando create-react-app .

Estoy probando el sitio web usando Chrome en MacOS y Safari en iPhone.

Antes de implementar esto, usé mi iPhone para probar el sitio web. Podría hacer esto create-react-app al enlace "En su red" que se muestra después de la construcción.

 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.

Pero me encontré con problemas al probar la API de Web Share en el iPhone: no podía hacer que el botón funcionara. Después de investigar un poco, me di cuenta de que:

• iOS Safari podría ejecutar el botón Web Share normalmente al acceder al sitio web implementado (en una dirección https)
• iOS Safari no puede ejecutar el botón Web Share cuando se accede a través del enlace de red.

Básicamente, tengo esta función que comparte correctamente un enlace si lo ejecuta el sitio web implementado, pero muestra una alerta si lo ejecuta el enlace de red.

 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"); } };

Sospecho que esto tiene que ver con que el enlace local de la red sea http (http://10.0.0.101:3000) ya que la API de Web Share solo puede ejecutarse en contextos seguros ( https )

No estoy seguro de cómo proceder aquí, quería probar mi sitio web en mi iPhone sin tener que implementarlo cada vez. Busqué un poco sobre "reenvío de puertos en Chrome", pero parece que solo funciona con dispositivos Android (y no estoy seguro de entender completamente qué es el reenvío de puertos, y si resolvería mi problema en primer lugar

Cualquier ayuda sería apreciada.