Usando Web Share API para llegar más lejos
Tags: javascript, html, webdev, webperf
Published: 2020-12-03 14:54:34

#Introducción
La _Web Share API_ nos permite compartir contenido de **forma nativa**, una funcionalidad que antes estaba limitada exclusivamente a aplicaciones nativas iOS y Android. En este _post_ veremos qué ventajas nos ofrece, la compatibilidad entre navegadores y su implementación.

![Compartición con Web Share API](https://dev-to-uploads.s3.amazonaws.com/i/ttvamr8t3xjy1jlp67xb.gif)
<figcaption>Fig.1 - Grabación compartiendo un inmueble de habitaclia.</figcaption>

#✅ ¿Qué ventajas nos proporciona?
* El usuario ya está acostumbrado a compartir de forma nativa mediante su dispositivo, con lo que la **experiencia de usuario es más óptima** que si se hiciera con un nuevo componente.
* Muestra **conversaciones recientes y las últimas aplicaciones** usadas y/o que tiene configuradas el usuario. 

![Conversaciones recientes al compartir](https://dev-to-uploads.s3.amazonaws.com/i/6k3nex578lsli0obewpj.png)
<figcaption>Fig.2 - Conversaciones y aplicaciones recientes al compartir.</figcaption>

* Se añaden aplicaciones nuevas **sin necesidad de iterar** ningún componente y opciones como imprimir o compartir entre dispositivos si el sistema operativo lo permite.
* **Mejora el rendimiento** de la página debido a que no hace falta usar librerías de terceros, plugins o componentes propios.
* El usuario compartirá más que con botones propios según los resultados obtenidos por [este caso de estudio](https://web.dev/web-share/#santa-tracker-case-study) de Google.

Y, por último, el hecho de usar API's que nos brinda la plataforma nos proporciona una ventaja añadida:
* Al ser un estándar ([o estar en vías de serlo] (https://www.w3.org/TR/web-share/)) a medida que los navegadores la implementan, llegará **a más usuarios**.

#🔧 ¿Qué necesitamos para poder usarla?
Se deben cumplir algunas condiciones para poder usar la Share API:
- Nuestra página web debe estar en un **contexto seguro [usando HTTPS](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)**.
- Solo podemos invocarla mediante una **acción del usuario**; por ejemplo al pulsar un botón.
- Para evitar errores es recomendable **comprobar que la API está disponible** en el navegador del usuario.

#🧭 ¿Qué compatibilidad tiene?
Actualmente el soporte es **bastante amplio** si consideramos que la mayoría de usuarios usan iOS Safari o Chrome para Android. En la siguiente captura del portal [Can I Use] (https://caniuse.com/web-share) podemos ver en verde los exploradores móviles compatibles:

![Web Share API compatibilidad en CanIUse](https://dev-to-uploads.s3.amazonaws.com/i/r1lsrq6b5cioi0qopqci.png)
<figcaption>Fig.3 - Captura de compatibilidad en Can I Use.</figcaption>

En cualquier caso, tal y como se comenta en el apartado anterior, es mejor comprobar si está disponible.

#👩🏻‍💻 ¿Cómo se usa?
Llamaremos a la Web Share API mediante el método _share_ que está disponible en el objecto _navigator_.

Primero comprobamos que está disponible en el navegador:
```javascript
if (navigator.share) {
  // Código si la Web Share API es soportada
} else {
  // Fallback
}
```
Si está disponible, usaremos el siguiente código para compartir contenido:

```javascript
   navigator.share({
      title: 'Usando la Web Share API para llegar más lejos',
      text: 'Comparte contenido en tu página web de forma nativa',
      url: 'https://dev.to/adevintaspain/usando-la-share-api-para-llegar-mas-lejos'
    })
    .then(() => console.log('¡Enlace compartido! Muchas gracias'))
    .catch(error => console.log('Ups, se ha producido un error', error)
```
¡Así de sencillo! Podemos compartir contenido con más usuarios y mediante más aplicaciones!

Si te ha parecido útil el artículo, dale al ♥️ y deja tus comentarios, impresiones o preguntas más abajo👇 ¿Te animas a usar la Web Share API en tu página web? ¿Ya la usas?

<span>Imagen portada por <a href="https://unsplash.com/@christopher__burns?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Christopher Burns</a></span>