Gerson Lázaro
_
Mayo 10, 2024 - 14 minutos de lectura
Javascript tiene una gran cantidad de APIs disponibles para usar en cualquier web. Algunas son muy conocidas, como canvas, console o fetch. Pero la lista es mucho más larga, con funciones avanzadas y poco conocidas. Con este artículo empezaré una serie de publicaciones que harán un recorrido por varias de esas APIs. Si quieres seguir toda la serie, suscríbete para recibirla en tu correo a medida que se vaya publicando.
Seguramente conoces el menú de compartir contenido de tu celular. Es un menú que se despliega desde la parte inferior de la pantalla y te permite enviar una publicación a tus amigos, compartirla en una red social, copiarla o guardarla en una app. Lo usan multitud de aplicaciones nativas, pero también puede utilizarse facilmente desde cualquier página web utilizando la API Web Share de javascript.
Hay algunas consideraciones que debes tener en cuenta si quieres usar esta API:
Web Share API permite compartir texto, urls o archivos. El objeto a compartir puede contener cuatro propiedades:
Todas las propiedades son opcionales pero debe existir por lo menos una. El objeto a compartir debe lucir de la siguiente manera:
1const data = { 2 title: "¡Publicación a compartir!", 3 text: "Y esta es la descripción a compartir", 4
Si bien puede compartirse directamente, siempre se recomienda confirmar que el objeto sea valido para evitar errores visuales que se disparen en el momento de ejecutar la acción. Para validar que el objeto creado previamente cumple con la especificación y puede compartirse, existe el método canShare():
1const isValid = navigator.canShare(data)
Una vez confirmas que los datos son válidos, puedes compartirlos con el método share(). Este método retorna una promesa que resuelve a indefinido. Una implementación muy sencilla podría ser:
1const share = async (data) => { 2 if (!navigator.share)
El navigator.share() puede lanzar diferentes excepciones para capturar en caso de error:
Si vas a compartir archivos, por motivos de seguridad no todos los archivos son aceptados. En MDN puedes encontrar una lista de extensiones válidas pero en este caso es fundamental validar la información con canShare(), pues aún usando estas extensiones es posible que el navegador bloquee alguno si lo considera no seguro.
Una implementación completa podría lucir de la siguiente manera:
1const share = async (data) => { 2 if (!navigator.share)
Si quieres ver un ejemplo en una página de la vida real, el blog que estás leyendo usa Web Share API. Si estás en un dispositivo que soporta la función, en la sección de compartir (al finalizar el post si estás en un celular, a la derecha en desktop) verás 4 íconos justo debajo del botón de suscribirte. El primero de ellos precisamente abre el menú de compartir usando Web Share API. ¿Y si el dispositivo no soporta la función? Sencillo, no se muestra el ícono. Verás solo 3 íconos (Linkedin, Facebook y X) para compartir del modo tradicional.
https. Sobre páginas http no es posible usar la API.Si quieres profundizar en el uso de Web Share API:
Y tú, ¿Ya estás usando Web Share API en tus aplicaciones web?
Este artículo hace parte de una serie (en construcción) de artículos sobre APIs de Javascript. Actualmente la serie consta de las siguientes entradas:
