El regalo de dar
Usar la próxima generación de aplicaciones web tiene algunas ventajas claras, una de las cuales es usar la API compartida del navegador. Gracias a un rico conjunto de capacidades en constante evolución, su navegador de elección ahora puede invocar Web Share API para compartir los siguientes elementos:
- Texto sin formato
- enlaces proporcionando un título
- archivos directamente
Si el navegador de un usuario es compatible con el nuevo navigator.share, ¡puede usar esta función ahora mismo!
¡Hora de demostración!
Usar la funcionalidad de compartir es tan sencillo como parece, aquí hay un ejemplo que realmente se usa en el sitio:
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
Como puede ver, esta devolución de llamada invoca la función de compartir asíncrona (si es posible) y proporciona algunos datos para que se pueda mostrar una buena URL + título descriptivo y subtítulo en la hoja de compartir. El código que se muestra se utiliza en una variante ligeramente diferente al final de este artículo. Si su navegador admite compartir, se mostrará un botón relacionado en la fila "Acciones".
Dónde utilizar
Al momento de escribir, la API se puede usar principalmente en variantes móviles de los navegadores populares (Chrome, Opera, Safari), pero solo en Safari + Edge en el escritorio. Como esta funcionalidad no se limita a requisitos específicos de hardware, espero que el soporte aumente en los próximos meses.
Y sí, esa fue una introducción rápida a la API Web Share. Para obtener más información, consulte el enlace web.dev y los artículos de MDN en el apéndice.
- Tom
