La API Web Share es una que aparentemente ha pasado desapercibida desde que se introdujo por primera vez en Chrome 61 para Android. En esencia, proporciona una forma de activar el cuadro de diálogo de uso compartido nativo de un dispositivo (o escritorio, si usa Safari) al compartir contenido (por ejemplo, un enlace o una tarjeta de contacto) directamente desde un sitio web o una aplicación web.
Si bien ya es posible que un usuario comparta contenido de una página web a través de medios nativos, debe ubicar la opción en el menú del navegador, e incluso entonces, no hay control sobre lo que se comparte. La introducción de esta API permite a los desarrolladores agregar funcionalidad para compartir en aplicaciones o sitios web aprovechando las capacidades nativas para compartir contenido en el dispositivo de un usuario.
iOS ofrece una serie de opciones nativas para compartir.
Este enfoque ofrece una serie de ventajas sobre los métodos convencionales:
- Al usuario se le presenta una amplia gama de opciones para compartir contenido en comparación con el número limitado que podría tener en su implementación de bricolaje.
- Puede mejorar los tiempos de carga de su página eliminando scripts de terceros de plataformas sociales individuales.
- No es necesario que agregue una serie de botones para diferentes sitios de redes sociales y correo electrónico. Un solo botón es suficiente para activar las opciones de uso compartido nativas del dispositivo.
- Los usuarios pueden personalizar sus destinos compartidos preferidos en su propio dispositivo en lugar de limitarse solo a las opciones predefinidas.
Una nota sobre la compatibilidad con el navegador
Antes de entrar en los detalles de cómo funciona la API, dejemos de lado el problema de la compatibilidad con el navegador. Para ser honesto, la compatibilidad con el navegador no es excelente en este momento. Solo está disponible para Chrome para Android y Safari (escritorio e iOS).
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 99 | No | No | 96 | 12,1 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | No | 12,2-12,5 |
Pero no dejes que eso te desanime de adoptar esta API en tu sitio web. Es bastante fácil implementar un respaldo para los navegadores compatibles que no lo ofrecen, como verá.
Algunos requisitos para usarlo
Antes de que pueda adoptar esta API en su propio proyecto web, hay dos cosas importantes a tener en cuenta:
- Su sitio web debe publicarse a través de HTTPS. Para facilitar el desarrollo local, la API también funciona cuando su sitio se ejecuta en localhost.
- Para evitar abusos, la API solo se puede activar en respuesta a alguna acción del usuario (como una
clickevento).
Aquí hay un ejemplo
Para demostrar cómo usar esta API, preparé una demostración que funciona esencialmente igual que en mi sitio. Así es como se ve:
Ver la pluma
Demostración de la API de WebShare: comience por Ayooluwa (@ayoisaiah)
en CodePen.
En este momento, una vez que hace clic en el botón compartir, aparece un cuadro de diálogo que muestra algunas opciones para compartir el contenido. Aquí está la parte del código que nos ayuda a lograrlo:
shareButton.addEventListener('click', event => {
shareDialog.classList.add('is-open');
});Sigamos adelante y convierta este ejemplo para usar la API Web Share en su lugar. Lo primero que debe hacer es verificar si la API es realmente compatible con el navegador del usuario, como se muestra a continuación:
if (navigator.share) {
// Web Share API is supported
} else {
// Fallback
}Usar la API Web Share es tan simple como llamar al navigator.share() método y pasar un objeto que contiene al menos uno de los siguientes campos:
url: Una cadena que representa la URL que se va a compartir. Por lo general, esta será la URL del documento, pero no tiene por qué serlo. Comparte cualquier URL a través de la API Web Share.title: Una cadena que representa el título que se va a compartir, normalmentedocument.title.text: Cualquier texto que desee incluir.
Así es como se ve en la práctica:
shareButton.addEventListener('click', event => {
if (navigator.share) {
navigator.share({
title: 'WebShare API Demo',
url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
// fallback
}
});En este punto, una vez que se hace clic en el botón de compartir en un navegador compatible, el selector nativo aparecerá con todos los posibles objetivos con los que el usuario puede compartir los datos. Los objetivos pueden ser aplicaciones de redes sociales, correo electrónico, mensajería instantánea, SMS u otros objetivos compartidos registrados.
La API se basa en promesas, por lo que puede adjuntar una .then() método para quizás mostrar un mensaje de éxito si el recurso compartido fue exitoso, y manejar los errores con .catch(). En un escenario del mundo real, es posible que desee tomar el título y la URL de la página con este fragmento:
const title = document.title;
const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;Para la URL, primero verificamos si la página tiene una URL canónica y, de ser así, la usamos. De lo contrario, agarramos el href apagado document.location.
Proporcionar una alternativa es una buena idea
En los navegadores en los que la API Web Share no es compatible, debemos proporcionar un mecanismo de respaldo para que los usuarios de esos navegadores aún obtengan algunas opciones para compartir.
En nuestro caso, tenemos un cuadro de diálogo que aparece con algunas opciones para compartir el contenido y los botones de nuestra demostración en realidad no se vinculan a ninguna parte ya que, bueno, es una demostración. Pero si desea aprender cómo puede crear sus propios enlaces para compartir páginas web sin scripts de terceros, el artículo de Adam Coti es un buen lugar para comenzar.
Lo que queremos hacer es mostrar el cuadro de diálogo de respaldo para los usuarios en navegadores sin soporte para la API Web Share. Esto es tan simple como mover el código que abre el diálogo de compartir en el else cuadra:
shareButton.addEventListener('click', event => {
if (navigator.share) {
navigator.share({
title: 'WebShare API Demo',
url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
shareDialog.classList.add('is-open');
}
});Ahora, todos los usuarios están cubiertos independientemente del navegador que utilicen. A continuación, se muestra una comparación de cómo se comporta el botón de compartir en dos navegadores móviles, uno compatible con Web Share API y el otro sin:
¡Pruébalo! Utilice un navegador que admita Web Share y uno que no. Debería funcionar de manera similar a la demostración anterior.
Ver la pluma
Demostración de la API de WebShare – Finalizada por Ayooluwa (@ayoisaiah)
en CodePen.
Terminando
Esto cubre prácticamente la base de lo que necesita saber sobre la API de Web Share. Al implementarlo en su sitio web, los visitantes pueden compartir su contenido más fácilmente a través de una variedad más amplia de redes sociales, con contactos y otras aplicaciones nativas.
También vale la pena señalar que puede agregar su aplicación web como destino para compartir si cumple con los criterios de instalación de la aplicación web progresiva y se agrega a la pantalla de inicio de un usuario. Esta es una característica de la API de destino de recurso compartido web sobre la que puede leer en Google Developers.
Aunque la compatibilidad con el navegador es irregular, una alternativa se implementa fácilmente, por lo que no veo ninguna razón por la que más sitios web no deban adoptar esto. Si desea obtener más información sobre esta API, puede leer la especificación aquí.
¿Ha utilizado la API de Web Share? Por favor compártelo en los comentarios.