Cuando hablamos de las Web APIs, nos referimos a las APIs que están integradas en los navegadores. Simplemente se trata de una API que los navegadores proveen, para acceder a ciertas funcionalidades y características del navegador (¡Y del sistema operativo!) Esta API es consumida desde el front-end, así que si, para usarla tenemos que usar JavaScript.

Estas API's están ayudando muchísimo al crecimiento y aceptación de las PWA (Progressive Web Apps) eliminando cada vez más la línea divisoria entre las aplicaciones nativas y las aplicaciones web.

Este post se enfocará en una pequeña parte de la Web API, y es la API para compartir contenido, o la Web Share API.

La Web Share API fue lanzada en 2016 por el equipo de Chrome, en su momento fue específicamente dirigida para Android Chrome 61. Desde entonces ha sido integrada a otros navegadores populares. Haciendo que compartir contenido en la web sea mucho más cómodo e intuitivo.

Compartiendo en la Web

Es común ver distintos tipos de widgets para compartir contenido en la web.

Normalmente al presionar sobre ellos, te redirigen a la red social donde quieres compartir el contenido, abren una nueva pestaña o incluso una ventana emergente. Todas estas maneras, son formas de lograr que el usuario comparta el contenido con su audiencia, pero también son formas de arruinar la experiencia de usuario, ya que ese no es el comportamiento que se espera al utilizar una aplicación nativa, y eso es justo lo que intentan las Progressive Web Apps, emular al máximo una aplicación nativa del móvil o de la computadora.

Compartiendo contenido con widgets personalizados

Compartiendo en la Web (La manera cool)

Gracias a la Web Share API no es necesario construir de forma manual una característica para compartir contenido, tampoco necesitamos de widgets de terceros. ¡El Navegador y el sistema operativo se encargarán de todo!

Esta API no solo beneficia a los desarrolladores, también tiene un impacto grande en la experiencia de usuario, ya que, al presionar el botón de compartir aparecerá justo lo que el usuario espera: Una ventana que luce familiar, con opciones para compartir contenido en distintas plataformas. ¡Y lo mejor, es que estas opciones están basadas en las aplicaciones que el usuario tiene instaladas!

Usando la Web Share API

Primero que todo, es necesario comprobar si el navegador actual soporta la Web Share API

if (navigator.share) {
  // La Web Share API está disponible
} else {
  // No está disponible, es necesario implementar una alternativa
}

En caso de que esté disponible, podemos hacer uso de la API.

const sharePromise = navigator.share(data);

El método share, recibe como parametro un objeto data que debe contener los siguientes campos:

Este método devuelve una Promise, que será resuelta una vez el usuario haya elegido una aplicación para compartir. La Promise fallará en caso de que el parámetro data no haya sido especificado de forma correcta. También fallará en caso de que el usuario cierre la ventana para compartir el contenido.

Para que todo salga bien debes tener en cuenta 2 cosas:

• El sitio debe ser servido a través de HTTPS
• Solo se puede invocar la API en respuesta a la acción de un usuario (click en un botón, por ejemplo)

Ejemplo:

const shareData = {
  title: 'DEV Community',
  text: 'Check my DEV profile!!',
  url: 'https://dev.to/andersonjoseph',
}

const btn = document.querySelector('button');


btn.onclick = () => {
  navigator.share(shareData)
    .then(() => console.log('Contenido Compartido!'))
    .catch(() => console.log('Sucedió algo inesperado'))
}

bastante simple.

Conclusión

Esta API es el futuro para compartir contenido, provee una forma efectiva y muy intuitiva para compartir. En un futuro muy cercano, esta es la forma en la cual los usuarios compartirán links mediante web apps.
Aunque está siendo soportada por distintos navegadores, es importante que verifiques si el navegador tiene soporte para la Web API.
Al momento de escribir esto, esta es la tabla de compatibilidad según Can I Use

También es importante que utilices mecanismos de alternativa en caso de que el navegador del usuario no sea compatible con esta API.